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;
}
}
});
- 【干货】如何写代码 -编程内功心法
- .NET中的异步编程下
- 深度学习数学基础一--最小二乘法
- 【LeetCode 344】关关的刷题日记26 Reverse String
- 基于AOE网的关键路径的求解
- 【LeetCode 122】关关刷题日记25-Best Time to Buy and Sell Stock II
- 【干货】python正则表达式应用笔记
- .NET跨平台之旅:将示例站点从 ASP.NET 5 RC1 升级至 ASP.NET Core 1.0
- .NET跨平台之旅:在Linux上以本地机器码(native)运行ASP.NET Core站点
- 【干货】基于pytorch的CNN、LSTM神经网络模型调参小结
- jenkins配置.net mvc网站
- 简述【聚类算法】
- word2vec理论与实践
- GMP大法教你重新做人(从入门到实战)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法