zTree - jQuery 最简单的树 -- 标准 JSON 数据

时间:2018-11-19
本文章向大家介绍jquery zTree树的简单使用,需要的朋友可以参考一下

  1.<!DOCTYPE html>是必须的。

  2.zTree 的容器 className 别忘了设置为 "ztree"。

  使用ztree创建树,首先要引用ztree相关css和js文件,因为ztree是基于jquery的,所以juqery的js文件必须引入。 

  <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css">
  <script type="text/javascript" src="../js/jquery/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="../js/ztree/jquery.ztree.core.min.js"></script>
 
  使用ztree必须建立一个容器,如第2关注点一样。
  <ul id="demoTree" class="ztree"></ul>
 js中配置如下:
  
    1.定义一个变量:var zTreeObj; (zTreeObj是树的一个对象,便于对树进行操作)。

    2.定义json数据 ztree的节点数据 :var zNodes = [{id:1, pId:0, name: "父节点1"},{id:11, pId:1, name: "子节点1"},{id:12, pId:1, name: "子节点2"}];
      默认展开的节点,可以设置treeNode.open属性;无子节点的父节点,设置treeNode.isParent属性。

    3.使用简单的json数据必须设置setting.data.simpleData相关属性(两个key值的value可自由定义对应json即可)
      var setting = { data : { simpleData : {enable:true,idKey:"id",pIdKey:"pId",rootPId:null } } };
    4.最后进行树的初始化,即可展现树并对树进行操作:zTreeObj = $.fn.zTree.init($("#demoTree"), setting, zNodes);
  

        

     当与后台进行交互时,就可以用ajax获取返回的json数据并进行树的初始化。  

  $.ajax({
    url : " ",
    data : {
      pid : pid,
    },
    success : function(res) {
    zTreeObj = $.fn.zTree.init($("#demoTree"), setting, res);
    var nodes = zTreeObj.getNodes()
    if (nodes.length > 0) {
      // 默认选中第一个节点
      zTreeObj.selectNode(nodes[0]);
      showTable(nodes[0].id);
      selectNode = nodes[0].id;
        }
       }
    });