004 ztree入门 - bos

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了004 ztree入门 - bos相关的知识,希望对你有一定的参考价值。


使用标准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>

 

以上是关于004 ztree入门 - bos的主要内容,如果未能解决你的问题,请参考以下文章

zTree入门使用

026 WebService入门 - bos

框架 day55 BOS项目练习(工作流,activiti入门)

Spring Boot 入门:集成 treetable 和 zTree 实现树形图

Python入门100题 | 第004题

004-React入门概述