首页 > 代码库 > zTree使用总结

zTree使用总结

2024-11-04 18:25:38   205人阅读

原地址

想要使用zTree实现的效果如下:

技术分享

即当鼠标点击进入文本框时，即通过ashx文件访问数据库后弹出zTree信息框。当点击窗口其他区域时此信息框隐藏。在这里，访问数据库的代码省略。

具体实现的代码如下：

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>ZTREE DEMO </title>  
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  6.     <link href=http://www.mamicode.com/"../plugins/JQuery_zTree_v2.5/demo/zTreeStyle/zTreeStyle.css" rel="Stylesheet"  
  7.         type="text/css" />  
  8.     <link href=http://www.mamicode.com/"../plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="Stylesheet" type="text/css" />  
  9.     <script type="text/javascript" src=http://www.mamicode.com/"../js/util/jquery-1.7.2.min.js"></script>  
  10.     <script type="text/javascript" src=http://www.mamicode.com/"../plugins/zTree/js/jquery.ztree.core-3.5.min.js"></script>  
  11.     <script type="text/javascript">  
  12.         <!--  
  13.         var setting = {  
  14.             view: {  
  15.                 showLine: false,  
  16. //                showIcon: showIconForTree,  
  17.                 dblClickExpand: true  
  18.             },  
  19.             data: {  
  20.                 simpleData: {  
  21.                     enable: true,  
  22.                     idKey: "id",  
  23.                     pIdKey: "pId",  
  24.                     rootPId: 0  
  25.                 }  
  26.             },  
  27.             callback: {  
  28.                 beforeClick: beforeClick,  
  29.                 onClick: onClick  
  30.             }  
  31.         };  
  32.   
  33.         function createTree() {  
  34.             var zNodes;  
  35.             $.ajax({  
  36.                 type: ‘POST‘,  
  37.                 url: ‘../../caseTypeHandler.ashx?action=GetCaseType‘, //url  action是方法的名称  
  38.                 data: { id: "0" },  
  39.                 dataType: "text", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json  
  40.                 ContentType: "application/json; charset=utf-8",  
  41.                 success: function (data) {  
  42.                     zNodes = data;  
  43.   
  44.                     $.fn.zTree.init($("#treeDemo"), setting, eval(‘(‘ + zNodes + ‘)‘));  
  45.   
  46.                 },  
  47.                 error: function (msg) {  
  48.                     alert("失败");  
  49.                 }  
  50.             });  
  51.         }  
  52.   
  53.   
  54.         $(document).ready(function () {  
  55.             createTree();  
  56.         });  
  57.   
  58.         // 控制父节点不显示图标  
  59.         function showIconForTree(treeId, treeNode) {  
  60.             return !treeNode.isParent;  
  61.         };  
  62.   
  63.         function beforeClick(treeId, treeNode) {  
  64.             var check = (treeNode && !treeNode.isParent);  
  65.             if (!check) alert("请不要选择类别...");  
  66.             return check;  
  67.         }  
  68.   
  69.         function onClick(e, treeId, treeNode) {  
  70.             var zTree = $.fn.zTree.getZTreeObj("treeDemo"),  
  71.             nodes = zTree.getSelectedNodes(),  
  72.             v = "";  
  73.             nodes.sort(function compare(a, b) { return a.id - b.id; });  
  74.             for (var i = 0, l = nodes.length; i < l; i++) {  
  75.                 v += nodes[i].name + ",";  
  76.             }  
  77.             if (v.length > 0) v = v.substring(0, v.length - 1);  
  78.             var nameObj = $("#nameSel");  
  79.             nameObj.attr("value", v);  
  80.             var n = "";  
  81.             for (var i = 0, l = nodes.length; i < l; i++) {  
  82.                 n += nodes[i].id + ",";  
  83.             }  
  84.             if (n.length > 0) n = n.substring(0, n.length - 1);  
  85.             nameObj.attr("nameid", n);  
  86.             hideMenu();  
  87.         }  
  88.   
  89.         function showMenu() {  
  90.             var nameObj = $("#nameSel");  
  91.             var nameOffset = $("#nameSel").offset();  
  92.             $("#menuContent").css({ left: nameOffset.left + "px", top: nameOffset.top + nameObj.outerHeight() + "px" }).slideDown("fast");  
  93.   
  94.             $("body").bind("mousedown", onBodyDown);  
  95.         }  
  96.   
  97.         function hideMenu() {  
  98.             $("#menuContent").fadeOut("fast");  
  99.             $("body").unbind("mousedown", onBodyDown);  
  100.         }  
  101.         // 当点击窗口其他区域时zTree消息框隐藏  
  102.         function onBodyDown(event) {  
  103.             if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {  
  104.                 hideMenu();  
  105.             }  
  106.         }  
  107.         //-->  
  108.     </script>  
  109.     <style type="text/css">  
  110.         ul.ztree  
  111.         {  
  112.             margin-top: 10px;  
  113.             border: 1px solid #617775;  
  114.             background: #f0f6e4;  
  115.             width: 220px;  
  116.             height: 360px;  
  117.             overflow-y: scroll;  
  118.             overflow-x: auto;  
  119.         }  
  120.     </style>  
  121. </head>  
  122. <body>  
  123.     <div class="content_wrap">  
  124.         <div class="zTreeDemoBackground">  
  125.             <ul class="list">  
  126.                 <li class="title"><span class="content_txt">name:</span>  
  127.                     <input id="nameSel" type="text" readonly value=http://www.mamicode.com/"" nameid="" onclick="showMenu(); return false;" />  
  128.                 </li>  
  129.             </ul>  
  130.         </div>  
  131.         <div id="menuContent" class="menuContent" style="display: none; position: absolute;">  
  132.             <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">  
  133.             </ul>  
  134.         </div>  
  135.     </div>  
  136. </body>  
  137. </html>  

 

zTree添加自定义属性

zTree节点中添加自定义的属性键值，

可以直接在js中，如下。其中，attr是添加的自定义属性。

 

[javascript] view plain copy
 
  1. var zNodes =[  
  2.             { id:1, pId:0, name:"pNode 1", open:true, attr:"id1"},  
  3.             { id:11, pId:1, name:"pNode 11", attr:"id11"},  
  4.             { id:111, pId:11, name:"leaf node 111", attr:"id111"},  
  5.             { id:112, pId:11, name:"leaf node 112", attr:"id112"},  
  6.             { id:12, pId:1, name:"pNode 12", attr:"id12"},  
  7.             { id:2, pId:0, name:"pNode 2", attr:"id2"},  
  8.             { id:21, pId:2, name:"pNode 21", open:true, attr:"id21"}  
  9. ];  

也可以通过json转化到js对象来添加属性。

 

调用此属性的方式如下：

 

[javascript] view plain copy
 
  1. var zTree = $.fn.zTree.getZTreeObj("treeDemo")；  
  2. var nodes = zTree.getSelectedNodes()；  
  3. nodes.sort(function compare(a, b) { return a.id - b.id; });  
  4. var v = "";  
  5. for (var i = 0, l = nodes.length; i < l; i++) {  
  6.         v += nodes[i].attr+ ",";  
  7.     }  
  8. if (v.length > 0) v = v.substring(0, v.length - 1);  
  9. alert("The attr value of selected nodes:"+v.toString());  

zTree使用总结


联系
我们