码迷，mamicode.com
首页 > 其他好文 > 详细

zTree使用总结

时间：2017-07-24 00:17:26      阅读：185      评论：0      收藏：0      [点我收藏+]

标签：readonly   border   tca   rip   使用   font   gets   doctype   cli   

原地址

想要使用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="../plugins/JQuery_zTree_v2.5/demo/zTreeStyle/zTreeStyle.css" rel="Stylesheet"  
  7.         type="text/css" />  
  8.     <link href="../plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="Stylesheet" type="text/css" />  
  9.     <script type="text/javascript" src="../js/util/jquery-1.7.2.min.js"></script>  
  10.     <script type="text/javascript" src="../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="" 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使用总结

标签：readonly   border   tca   rip   使用   font   gets   doctype   cli   

原文地址：http://www.cnblogs.com/lxl57610/p/7226574.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！