javascript框架jquery ztree中的simpledata参数是什么意思？
首先在页面上有<ul/>标签
<ul id="tree" class="ztree"></ul>
2、定义ztree的配置参数
var setting = {
//check属性放在data属性之后，复选框不起作用
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};
核心参数：zTreeNodes
zTree
的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式
①带有父子关系的标准
zTreeNodes 举例:
Js代码
var zTreeNodes = [
{"id":1, "name":"test1",
"nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111,
"name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];
②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：
Js代码
var
treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1,
"name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111,
"pId":11, "name":"test111"},
......
];
【实例一】(Java代码)
①在页面引用zTree的js和css：
Html代码
<!-- ZTree树形插件
-->
<link rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<!-- <link rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css"
type="text/css"> -->
<script type="text/javascript"
src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
②在script脚本中定义setting和zTreeNodes
Java代码
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id",
//在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId",
//在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable
: true //每个节点上是否显示 CheckBox
};
var treeNodes = [
{"id":1,
"pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12,
"pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
];
③在进入页面时生成树结构：
Js代码
var zTree;
Js代码
$(function() {
zTree =
$("#tree").zTree(setting, treeNodes);
});
