欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-21 13:35:58
1.是必须的。 2.zTree 的容器 className 别忘了设置为 "ztree"。 使用ztree创建树，首先要引用ztree相关css和js文件，因为ztree是基于jquery的，所以juqery的js文件必须引入。 当与后台进行交互时，就可以用ajax获取 ......

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



上一篇： 乔纳森月末将现身博物馆演讲“设计的未来”

下一篇： 80%的SSD故障源于固件 数据恢复专家：建议使用SLC硬盘

推荐阅读