入门—最简单的树（使用json数据）

　　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);

　　　　入门—最简单的树（使用json数据）

　　　　当与后台进行交互时，就可以用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;
　　　　　　　　}
　　　　　　　}
　　　　});

秒客网

入门—最简单的树（使用json数据）

相关文章