javascript框架jquery ztree中的simpledata参数是什么意思？
2024-09-29 21:41:25
首先在页面上有<ul/>标签
<ulid="tree"class="ztree"></ul>
2、定义ztree的配置参数
varsetting={
//check属性放在data属性之后，复选框不起作用
check:{
enable:true
},
data:{
simpleData:{
enable:true
},
}
};
核心参数：zTreeNodes
zTree
的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式
①带有父子关系的标准
zTreeNodes举例:
Js代码
varzTreeNodes=[
{"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树形插件
-->
<linkrel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<!--<linkrel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css"
type="text/css">-->
<scripttype="text/javascript"
src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
②在script脚本中定义setting和zTreeNodes
Java代码
varsetting={
isSimpleData:true,//数据是否采用简单Array格式，默认false
treeNodeKey:"id",
//在isSimpleData格式下，当前节点id属性
treeNodeParentKey:"pId",
//在isSimpleData格式下，当前节点的父节点id属性
showLine:true,//是否显示节点间的连线
checkable
:true//每个节点上是否显示CheckBox
};
vartreeNodes=[
{"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代码
varzTree;
Js代码
$(function(){
zTree=
$("#tree").zTree(setting,treeNodes);
});
热门标签
