zTree的使用

zTree的使用

最近用到了zTree，但是之前一直没有整理过，这里做一个小Demo，方便学习和使用。

更多的参考—zTree官网—

使用前先引入JS和CSS样式

<script type="text/javascript" src="../../lib/ztree/jquery-1.4.4.min.js" ></script>
<script type="text/javascript" src="../../lib/ztree/jquery.ztree.all.min.js" ></script>
<link rel="stylesheet" href="../../lib/ztree/css/zTreeStyle/zTreeStyle.css" />

普通Ztree

<fieldset>
  <legend><h1>1-普通的zTree</h1></legend>
    <div class="zTreeDemoBackground left">
      <ul id="treeDemo" class="ztree"></ul>
</div>
<script>
var setting = { };
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}
    ]
  },//父节点1结束
  { 
    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"}
        ]}
    ]
  },//父节点2结束
  { 
    name:"父节点3 - 没有子节点",
    isParent:true
  }
];

$(document).ready(function(){
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</fieldset>

简单ZTree

<fieldset>
  <legend><h1>2-简单的zTree</h1></legend>
    <div class="zTreeDemoBackground left">
      <ul id="treeDemo2" class="ztree"></ul>
</div>
<button id="btn">得到所有的选中的节点</button>
<button id="btn2">选中一些节点</button>
<button id="btn3">选中所有的节点</button>
<button id="btn4">取消所有的节点</button>
<button id="btn5">展开所有的节点</button>
<button id="btn51">展开某个节点</button>
<button id="btn6">收起所有的节点</button>

<script>
  var setting = {
    data: {
      simpleData: {
        //true,false分别表示使用不使用简单数据模式
        enable: true,
        //节点数据中保存唯一标识的属性名称(即是ztreeDOM节点的id)
        idKey: "id",
        //节点中父ID的
        pIdKey: "pId",
        rootPId: -1 // 修正根节点
      },
      key: {
        //当后台数据只能生成 url 属性，又不想实现点击节点跳转的功能时，
        //可以直接修改此属性为其他不存在的属性名称
        url:"nourl"
      }
    },
    check:{
      enable:true,
      nocheckInherit:true
    }
  };

/* 被选中的节点json数组 */
var checkedNodes = [
  { id:112, pId:11, name:"叶子节点112"},
  { id:113, pId:11, name:"叶子节点113"},
  { id:212, pId:21, name:"叶子节点212"},
  { id:222, pId:22, name:"叶子节点222"},
  { id:233, pId:23, name:"叶子节点233"},
  { id:234, pId:23, name:"叶子节点234"}
]

/* 所有的节点json数组 */
var zNodes = [
  { id:0, pId:-1, name:"根节点 - 展开", open:true},
  { id:1, pId:0, name:"父节点1 - 展开", open:true},
  { id:11, pId:1, name:"父节点11 - 折叠"},
  { id:111, pId:11, name:"叶子节点111"},
  { id:112, pId:11, name:"叶子节点112"},
  { id:113, pId:11, name:"叶子节点113"},
  { id:114, pId:11, name:"叶子节点114"},
  { id:12, pId:1, name:"父节点12 - 折叠"},
  { id:121, pId:12, name:"叶子节点121"},
  { id:122, pId:12, name:"叶子节点122"},
  { id:123, pId:12, name:"叶子节点123"},
  { id:124, pId:12, name:"叶子节点124"},
  { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
  { id:2, pId:0, name:"父节点2 - 折叠"},
  { id:21, pId:2, name:"父节点21 - 展开", open:true},
  { id:211, pId:21, name:"叶子节点211"},
  { id:212, pId:21, name:"叶子节点212"},
  { id:213, pId:21, name:"叶子节点213"},
  { id:214, pId:21, name:"叶子节点214"},
  { id:22, pId:2, name:"父节点22 - 折叠"},
  { id:221, pId:22, name:"叶子节点221"},
  { id:222, pId:22, name:"叶子节点222"},
  { id:223, pId:22, name:"叶子节点223"},
  { id:224, pId:22, name:"叶子节点224"},
  { id:23, pId:2, name:"父节点23 - 折叠"},
  { id:231, pId:23, name:"叶子节点231"},
  { id:232, pId:23, name:"叶子节点232"},
  { id:233, pId:23, name:"叶子节点233"},
  { id:234, pId:23, name:"叶子节点234"},
  { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];

var ztree ;
$(document).ready(function(){
  ztree = $.fn.zTree.init($("#treeDemo2"), setting, zNodes);

  /* 得到所有的勾选的节点对象 */
  $("#btn").click(function(){
    var nodes = ztree.getCheckedNodes();//得到checkbox选中的对象
    console.log(nodes);
    console.log("------ 华丽的分割线 ------");
    // 存放所有被选中节点的数组
    var objList = new Array();
    for(var k in  nodes){
      var obj = {
        id:nodes[k].id,
        pId:nodes[k].pId,
        name:nodes[k].name,
        isParent:nodes[k].isParent
      }
      objList.push(obj)
    }
    console.log(objList);
  });

  /* 选中指定的节点 */
  $("#btn2").click(function(){
    for(let k in checkedNodes){
      // 根据参数类型和值获得指定的node节点
      let node = ztree.getNodeByParam("id", checkedNodes[k].id);
      // 选中指定的node节点对象,
      // 参数2:true/false(选中/取消)
      // 参数3:true/false(是否影响父节点联动选中)
      ztree.checkNode(node, true, true);
    }
  });


  /* 选中所有的节点 */
  $("#btn3").click(function(){
    ztree.checkAllNodes(true);
  })
  /* 取消所有的节点 */
  $("#btn4").click(function(){
    ztree.checkAllNodes(false);
  })

  /* 展开所有的节点 */
  $("#btn5").click(function(){
    ztree.expandAll(true);
  })

  /* 展开某个节点 */
  $("#btn51").click(function(){
    let node = ztree.getNodeByParam("pId",0);
    // 参数2:true/false(展开/收起)
    // 参数3:true/false(是否影响父节点联动选中)
    ztree.expandNode(node,true,true);
  })
  /* 收起所有的节点 */
  $("#btn6").click(function(){
    ztree.expandAll(false);
  })

});

</script>
</fieldset>