ztree 使用 简单案例

1.      下载ztree树；

2.      在页面上引用；

<link rel="stylesheet" href="*/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>

<script type="text/javascript" src="*/ztree/js/jquery.ztree.all-3.5.min.js"></script>

（我使用的是3.5的版本）

3.  在body中新建一个<ul></ul>用于显示树，注意，设定class=”ztree”

例如：<ul id="tree"class="ztree"></ul>

4.  使用javascript，填充body中的ul:

    <script>

           var setting = {

              data: {

                  simpleData:{

                     enable: true//是否显示父子节点

                  }

              },

              callback:{

                  onClick: selectArticleByColumn  //点击事件，只写函数名称即可，函数需要三个参数：event，treeId,treeNode;treeNod内有，treeNode.id treeNode.name

              }

           };

           var treeNodes2 = ${columnList};//从后台传过来的数据，JOSN格式；

           $(function() { 

               //$("#tree").zTree(setting, treeNodes); 

              $.fn.zTree.init($("#tree"), setting, treeNodes2);

               //动态添加一个根目录

               //var treeObj = $.fn.zTree.getZTreeObj("tree");

              //var newNode ={name:"栏目标待定"};

              //newNode =treeObj.addNodes(null, newNode);

           });

       </script>

注意：上述例子是从后台传过来的list集合，但是list中对象的属性应该包含id,pId两个属性，id为改对象的id,pId为父对象的id,一定要有这两个属性，如果你的对象中已经有parent_id了，也要有pid属性，如果没有，该插件无法识别。