zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。多用于层级结构,因为是国人写的,在中国很多人使用,不过使用确实很方便。
API 文档和源码 :http://www.treejs.cn/v3/main.php#_zTreeInfo;
直接开撸。
js:
<script type="text/javascript">
var zNodes = new Array();
var setting = {
data:{
simpleData:{
enable: true,
idKey: "id", //id编号命名
pIdKey: "pId", //父id编号命名
rootPId: "-1"
},
key : {
name : "name" //如果命名就是"name",此处可以不写
},
},
view:{
showLine:false,
selectedMulti: false
}
}
function getAgentStructure(){
$.ajax({
url:"/cyAgentStructure/cyAgentStructure.do?action=getCyAgentStructureList",
dataType:"json",
data:{isDel:0},
success:function(data){
var dataList = data.data;
$.each(dataList,function(index,eachData){
var node = {};
node["id"] = eachData.id;
node["pId"] = eachData.parentid;
node["name"] = eachData.name;
zNodes.push(node);
});
$.fn.zTree.init($("#treeDemo2"),setting,zNodes);
//展示树节点
$.fn.zTree.getZTreeObj("treeDemo2").expandAll(true);
}
});
}
</script>
代码解析:
setting.data.simpleData.enable
概述[ 依赖 jquery.ztree.core 核心 js ]
确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
默认值:false
Boolean 格式说明
true / false 分别表示 使用 / 不使用 简单数据模式
如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId,并且让数据满足父子关系。
setting 举例
1. 使用简单 Array 格式的数据
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
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"}
];
......
setting.view.showLine
概述[ 依赖 jquery.ztree.core 核心 js ]
设置 zTree 是否显示节点之间的连线。
默认值:true
Boolean 格式说明
true / false 分别表示 显示 / 不显示 连线
setting 举例
1. 设置 zTree 不显示节点之间的连线
var setting = {
view: {
showLine: false
}
};
......
setting.view.selectedMulti
概述[ 依赖 jquery.ztree.core 核心 js ]
设置是否允许同时选中多个节点。
默认值: true
Boolean 格式说明
true / false 分别表示 支持 / 不支持 同时选中多个节点
1、设置为 true时,按下 Ctrl 或 Cmd 键可以选中多个节点
2、设置为 true / false 都不影响按下 Ctrl 或 Cmd 键可以让已选中的节点取消选中状态( 取消选中状态可以参考 setting.view.autoCancelSelected )
setting 举例
1. 禁止多点同时选中的功能
var setting = {
view: {
selectedMulti: false
}
};
......
getCyAgentStructureList 返回的数据:
{
"total": 4,
"data": [{
"id": 21,
"updateBy": "",
"createTime": "",
"isDel": 0,
"sort": 10,
"updateTime": "",
"description": "",
"name": "拉亚里",
"parentid": 20,
"structureCode": "",
"bid": 57,
"createBy": "",
"structureLogo": ""
}, {
"id": 20,
"updateBy": "",
"createTime": "",
"isDel": 0,
"sort": 9,
"updateTime": "",
"description": "",
"name": "飞鱼",
"parentid": 19,
"structureCode": "",
"bid": 57,
"createBy": "",
"structureLogo": ""
}, {
"id": 19,
"updateBy": "",
"createTime": "",
"isDel": 0,
"sort": 8,
"updateTime": "",
"description": "",
"name": "利亚",
"parentid": 18,
"structureCode": "",
"bid": 57,
"createBy": "",
"structureLogo": ""
}, {
"id": 18,
"updateBy": "",
"createTime": "",
"isDel": 0,
"sort": 7,
"updateTime": "",
"description": "",
"name": "蒙丽都",
"parentid": -1,
"structureCode": "",
"bid": 57,
"createBy": "",
"structureLogo": ""
}]
}
jsp 页面:
<!-- 注意:一定要引 zTree 包 -->
<script src="<%=staticWebUrl%>/kz/ui/main/v3.0/business/common/js/jquery.ztree.core-3.5.js"></script>
<div>
<ul id="treeDemo2" class="ztree"></ul>
</div>
下载 zTree 插件,项目中导入 js、css 和 image,zTree 有很多扩展 js,暂时没有用上,所以只导入 jquery.ztree.core.js 就可以了,当然还要导入 jquery.min.js,css 需要导入 zTreeStyle.css,而 demo.css 中有很多样式,如果需要用到的话也可以导入。
效果: