首页 > 代码库 > Jquery LigerUI框架学习（一）Tree数据整理
Jquery LigerUI框架学习（一）Tree数据整理
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src=http://www.mamicode.com/"lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <link href=http://www.mamicode.com/"lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src=http://www.mamicode.com/"lib/ligerUI/js/core/base.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script> <style type="text/css"> .box { float: left; } .tree { width: 230px; height: 200px; margin: 10px; border: 1px solid #ccc; overflow: auto; } h4 { margin: 10px; } </style> <script type="text/javascript"> var manager=null; $(function () { $("#tree1").ligerTree({ nodeWidth: 200, //Tree控件宽度 data: createData(), //Tree数据源 checkbox: true, //是否使用Checkbox idFieldName: ‘id‘, //绑定id isExpand: 2, //是否展开节点 FALSE为不展开 TRUE展示所有节点 指定数字为展开指定节点 slide: false, //节点展开效果False无效果 TRUE缓慢展开效果 parentIDFieldName: ‘pid‘//绑定夫ID }); manager = $("#tree1").ligerGetTreeManager(); }); //数据输出 function createData() { var data =http://www.mamicode.com/ []; data.push({ id: 1, pid: 0, text: ‘1‘, url: "www.baidu.com",ischecked: true});//设置节点ID 夫ID 节点内容 节点链接 选中状态 data.push({ id: 2, pid: 1, text: ‘1.1‘ }); data.push({ id: 4, pid: 2, text: ‘1.1.2‘ }); data.push({ id: 5, pid: 2, text: ‘1.1.2‘ }); data.push({ id: 10, pid: 8, text: ‘wefwfwfe‘ }); data.push({ id: 11, pid: 8, text: ‘wgegwgwg‘ }); data.push({ id: 12, pid: 8, text: ‘gwegwg‘ }); data.push({ id: 6, pid: 2, text: ‘1.1.3‘, ischecked: true }); data.push({ id: 7, pid: 2, text: ‘1.1.4‘ }); data.push({ id: 8, pid: 7, text: ‘1.1.5‘ }); data.push({ id: 9, pid: 7, text: ‘1.1.6‘ }); data.push({ id: 20, pid: 0, text: ‘1‘, url: "www.baidu.com" }); data.push({ id: 21, pid: 20, text: ‘12‘, url: "www.baidu.com" }); return data; } function getSelected() { var note = manager.getSelected(); //获取选中节点的内容 非选中chechbox alert(‘选择的是:‘ + note.data.url); } function getChecked() { var notes = manager.getChecked(); //获取选中Chechebox内容 var text = ""; for (var i = 0; i < notes.length; i++) { text += notes[i].data.text + ","; } alert(‘选择的节点数：‘ + text); } function collapseAll() { manager.collapseAll();//全选 } function expandAll() { manager.expandAll();//取消全选 } </script></head><body style="padding: 10px"><input value=http://www.mamicode.com/"全选" onclick="collapseAll()" type="button" /><input value=http://www.mamicode.com/"取消全选" onclick="collapseAll()" type="button" /><input value=http://www.mamicode.com/"获取选中内容" onclick="getSelected()" type="button" /><input value=http://www.mamicode.com/"获取选中Chechebox内容" onclick="getChecked()" type="button" /> <div class="box"> <h4> 不展开节点</h4> <div class="tree"> <ul id="tree1"> </ul> </div> </div> <div class="l-clear"> </div></body></html>
Jquery LigerUI框架学习（一）Tree数据整理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。