jQuery插件zTree, 项目地址:http://www.ztree.me/v3/main.php#_zTreeInfo, 国人开发,中文文档。使用上相对容易。累世这类插件的使用,往往会有很多配置信息,所以需要花一些时间理清楚配置参数的作用,然后学习基本的API。通过例子学习是一个捷径。
以下是一个例子,在这个例子中,我实现了根据勾选的叶子节点,获取整个路径的信息,因为我实际中需要保存这个路径:
<?php /* [ { "id":"1", "parentid":"0", "name":"服装及配饰" }, {} ] */ include 'inc.php'; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jquery.min.js"></script> <script src="js/jquery.ztree.all-3.5.min.js"></script> <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css" media="all" /> <script> treeJson = <?php echo $tree?>; var setting = { view:{ // 双击展开 dblClickExpand: true, // 是否显示对齐线 showLine: false, // 是否显示图标 showIcon:false }, data: { simpleData: { // 是否启用简单数据模式(这个方式只要把每个目录按照如下格式读出放入数组即可) enable: true, // 目录ID的标识符 idKey: "id", // 符目录ID标识符 pIdKey: "parentid", // 根目录ID值 rootPId: 0 } }, check: { // 是否启用选框 enable: true, // 设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数 autoCheckTrigger: true, chkStyle: "checkbox" } }; $(function(){ // 第一个参数是一个容器(jQuery包装),第二参数是配置信息,第三参数是Json数据 // 注意:容器需要应用一个叫ztree的CSS类,也可以修改,不过对应CSS样式要替换(一般不需要改动) zTree = $.fn.zTree.init($("#erpTree"), setting, treeJson); $("#trigger").click(function(){ var set = $(this); if(set.attr('clear') == 'false'){ set.attr('clear','true'); // 清楚所有勾选 zTree.checkAllNodes(false); return; }else if(set.attr('clear') == 'true'){ set.attr('clear','false'); } // 节点ID,不需要区分子节点 和 父节点 var nodes = [82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,403,404,405,406,445,476,510,511]; for(i in nodes){ // 获取节点对象 var node = zTree.getNodeByParam('id',nodes[i]); // 选中节点 第一参数必须是zTree内部节点对象,第二参数表示是否选中,第三参数表示是否联动操作(子节点选中,父节点也选上) zTree.checkNode(node, true, true); // 更新节点信息 //zTree.updateNode(node); } }); $("#getNodes").click(function(){ // 获取所有选中的节点对象 var checkedNodes = zTree.getCheckedNodes(true); // 选中节点ID与对象对照表 var cates = {}; for(var ii in checkedNodes){ cates[checkedNodes[ii]['id']] = checkedNodes[ii]; } // 子节点路径对应 var catePath = {}; for(i in checkedNodes){ // 子节点 回溯 获取路径 if(!checkedNodes[i]['isParent']){ var id = checkedNodes[i]['id'], name = checkedNodes[i]['name']; var ids = [], names = []; ids.push(id); names.push(name); pid = checkedNodes[i]['parentid']; for(var j=0; j<30; j++){ if(pid != 0){ node = cates[pid]; ids.push(node['id']); names.push(node['name']); pid = node['parentid']; }else{ break; } } catePath[id] = [ids.reverse().join('-'),names.reverse().join('-')]; } } var outStr = ''; $.each(catePath,function(){ //console.log(this.join('|')); outStr += this.join('|')+"<br />"; }); $("#log").html(outStr); }); }); </script> </head> <body> <table> <tr> <td style="vertical-align:top;width:350px;"> <div id="erpTree" class="ztree"></div> <button id="trigger" clear="true">设置节点</button> -- <button id="getNodes">获取节点</button> </td> <td style="vertical-align:top"> <div id="log"></div> </td> </tr> </table> </body> </html>
Demo地址:http://blog.ifeeline.com/jquery/zTree_v3/index.php