js 节点选中ztree_关于Jquery和Ztree的应用和总结

最新推荐文章于 2023-02-27 17:22:44 发布

黄一只

最新推荐文章于 2023-02-27 17:22:44 发布

阅读量93

点赞数

文章标签： js 节点选中ztree

本文链接：https://blog.csdn.net/weixin_28700411/article/details/112542947

版权

关于Jquery和Ztree的应用和总结

树状结构目录显示比较流行的有dtree、xtree、EXTtree、E3tree、ztree。

Ztree是所有中功能最强大的树。Dtree和Xtree已经逐步淘汰，EXTtree、E3tree功能不全。

ZTree是一个依靠 jQuery 实现的多功能 “树插件”，支持选择框等显示，动态更改图标，提供多种事件响应回调，而且异步数据功能强大。

示例如下：

添加相关CSS和js库

<head>
 <meta charset="utf-8" />
 //添加相关的ztree的css
 <link rel="stylesheet" href="../plugins/jQueryZtree/demo.css" />
 <link rel="stylesheet" href="../plugins/jQueryZtree/zTreeStyle.css" />
 //添加相关的jquery和ztree的js库
 <script src="../plugins/jQueryZtree/jquery-1.4.4.min.js"></script>
 <script src="../plugins/jQueryZtree/jquery.ztree.core-3.5.js"></script>
 <script src="../plugins/jQueryZtree/jquery.ztree.excheck-3.5.min.js"></script>
 <SCRIPT type="text/javascript">
  <!--
  var setting = {
    check: {
     enable: true
    },
    data: {
     simpleData: {
      enable: true
     }
    },
    callback: {
     onCheck: onCheck
    }
   };
   
  function filter(node) {   //过滤器直选中2级节点累加
   return (node.checked == true);
  }

  function onCheck(e, treeId, treeNode) {
   var pNode = treeNode;
   var pNodePath = "";
   while(!!pNode){
    pNodePath = ""+ pNode.name + pNodePath;
    pNode = pNode.getParentNode();
   }
   alert(pNodePath);
   /*
   var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo").getNodesByFilter(filter);

   for(var i = 0,len = zTreeObj.length; i < len; i++){
    alert(zTreeObj[i].name);
   }
   */
  }  
  
  var zNodes =[
   { name:"父节点1 - 展开", open:true,
    children: [
     { name:"父节点11 - 折叠",
      children: [
       { name:"叶子节点111"},
       { name:"叶子节点112"},
       { name:"叶子节点113"},
       { name:"叶子节点114"}
      ]},
     { name:"父节点12 - 折叠",
      children: [
       { name:"叶子节点121"},
       { name:"叶子节点122"},
       { name:"叶子节点123"},
       { name:"叶子节点124"}
      ]},
     { name:"父节点13 - 没有子节点", isParent:true}
    ]},
   { name:"父节点2 - 折叠",
    children: [
     { name:"父节点21 - 展开", open:true,
      children: [
       { name:"叶子节点211"},
       { name:"叶子节点212"},
       { name:"叶子节点213"},
       { name:"叶子节点214"}
      ]},
     { name:"父节点22 - 折叠",
      children: [
       { name:"叶子节点221"},
       { name:"叶子节点222"},
       { name:"叶子节点223"},
       { name:"叶子节点224"}
      ]},
     { name:"父节点23 - 折叠",
      children: [
       { name:"叶子节点231"},
       { name:"叶子节点232"},
       { name:"叶子节点233"},
       { name:"叶子节点234"}
      ]}
    ]},
   { name:"父节点3 - 没有子节点", isParent:true}

  ];
  
  $(document).ready(function(){
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   var zTree = $.fn.zTree.getZTreeObj("treeDemo")
 //配置ztree同时选中父节点和子节点
   zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
  });
  //-->
  </SCRIPT>
</head>
<body>
 <div class="content_wrap">
  <div class="zTreeDemoBackground left">
  <ul id="treeDemo" class="ztree"></ul>
  </div>
 </div>
</body>

注意在head中的JavaScript标签，标签里面要加上，否则部分JavaScript可能无法执行，比如普通for循环就不能执行

<SCRIPT type="text/javascript">
 <!--
  for(var i = 0; i < 3; i++){
   alert(i);
  }
 //-->
</SCRIPT>

黄一只

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 节点选中ztree_关于Jquery和Ztree的应用和总结

关于Jquery和Ztree的应用和总结树状结构目录显示比较流行的有dtree、xtree、EXTtree、E3tree、ztree。Ztree是所有中功能最强大的树。Dtree和Xtree已经逐步淘汰，EXTtree、E3tree功能不全。ZTree是一个依靠 jQuery 实现的多功能 “树插件”，支持选择框等显示，动态更改图标，提供多种事件响应回调，而且异步数据功能强大。示例如下：添加相关C...
复制链接

扫一扫