入门—最简单的树(使用json数据)
程序员文章站
2022-04-04 15:25:46
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);
当与后台进行交互时,就可以用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;
}
}
});
上一篇: 360的手机征途:约战雷军与华为合作,曾4个月出四款新机
下一篇: webpack初步搭建Vue项目
推荐阅读
-
使用json-server简单完成CRUD模拟后台数据的方法
-
最简单的Oracle数据恢复 select as of使用方法
-
RuleEngine -- 一款使用简单,入门方便的数据库规则引擎 中间件规则引擎JavaRuleEngine
-
你一定没用过最简单的使用SXSSFWorkbook快速导出百万条数据
-
python财经数据接口包Tushare pro的入门及简单使用方式(大数据,股票数据接口)
-
入门—最简单的树(使用json数据)
-
使用json-server简单完成CRUD模拟后台数据的方法
-
MongoDB最简单的入门教程之二 使用nodejs访问MongoDB mongoDB数据库nodejs
-
最简单的Oracle数据恢复 select as of使用方法
-
python财经数据接口包Tushare pro的入门及简单使用方式(大数据,股票数据接口)