004 ztree入门 - bos

Posted 2020-10-03

使用标准json数据构造ztree

1.使用标准json构造ztree，children属性用于描述子节点，可以无限嵌套下去
2.name属性用于描述节点名称
3.缺点是结构很混乱，不易修改，代码阅读、维护困难
4.示例代码

<!-- 展示ztree效果 :使用标准json数据构造ztree-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting = {};
//构造节点数据
var zNodes = [
{"name":"节点一","children":[
{"name":"节点一_1"},
{"name":"节点一_2"}]},//每个json对象表示一个节点数据
{"name":"节点二"},
{"name":"节点三"}];
//调用API初始化ztree
$.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>


使用简单json数据构造ztree（重点）

1.要使用简单的json数据描述ztree结构，首先要在settings中开启设置，设置方式为
var setting2 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};

2.开启后，每个节点可以使用属性"id"描述自身的id，使用属性"pId"描述父类的id，以此类描述树形结构
var zNodes2 = [
{"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据，pId为父节点
{"id":"2","pId":"3","name":"节点二"},
{"id":"3","pId":"0","name":"节点三"}];
3.使用简单的json数据格式描述树形结构，易于修改，建议使用
4.以下是代码样例

<!-- 展示ztree效果 :使用简单json数据构造ztree-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting2 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//构造节点数据
var zNodes2 = [
{"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据，pId为父节点
{"id":"2","pId":"3","name":"节点二"},
{"id":"3","pId":"0","name":"节点三"}];
//调用API初始化ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
});
</script>

发送ajax请求获取json数据构造ztree

1.ztree的构造数据不在页面直接写死，而是通过ajax方法请求服务端获取json数据，构造页面
2.其中page属性值描述单机该菜单栏后想打开的页面
2.下面是测试样例：
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};

//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},‘json‘);
});
</script>

3.下面是请求的menu.json

[
{ "id":"11", "pId":"0", "name":"基础数据"},
{ "id":"112", "pId":"11", "name":"取派员设置", "page":"page_base_staff.action"},
{ "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
{ "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
{ "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
{ "id":"12", "pId":"0", "name":"受理"},
{ "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
{ "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
{ "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
{ "id":"13", "pId":"0", "name":"调度"},
{ "id":"131", "pId":"13", "name":"查台转单","page":""},
{ "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
]

使用ztree提供的API为节点绑定事件

1.当希望单击左侧属性菜单栏时，执行一系列操作，可以使用ztree提供的回调函数
2.ztree的回调函数定义在setting的callback属性里面，在里面涉及很多事件的回调，如单机的回调可以这样编写：
//页面加载完成后，执行这段代码----动态创建ztree
var setting = {
callback: {
//为ztree节点绑定单击事件
onClick: function(event, treeId, treeNode){
//do something;
}
}
};
3.以下是单击左侧菜单项，按名称创建选项卡并请求指定的page页面

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
},
callback: {
//为ztree节点绑定单击事件
onClick: function(event, treeId, treeNode){
if(treeNode.page != undefined){
//判断选项卡是否已经存在
var e = $("#mytabs").tabs("exists",treeNode.name);
if(e){
//已经存在，选中
$("#mytabs").tabs("select",treeNode.name);
}else{
//动态添加一个选项卡
$("#mytabs").tabs("add",{
title:treeNode.name,
closable:true,
content:‘<iframe frameborder="0" height="100%" width="100%" src="‘+treeNode.page+‘"></iframe>‘
});
}
}
}
}
};

//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},‘json‘);
});
</script>