在之前的帖子中曾经介绍过zTree的基本使用，现在利用BOS中的树形菜单做个小demo来实现zTree的动态选取功能。完整功能代码参见附件。
项目文件目录如下：
1.准备zTree树的json数据：
[JavaScript] 纯文本查看 复制代码 [
{ "id":"11", "pId":"0", "name":"基础数据"},
{ "id":"111", "pId":"11", "name":"基础档案设置", "page":"pages/base/archives.html"},
{ "id":"112", "pId":"11", "name":"收派标准", "page":"pages/base/standard.html"},
{ "id":"113", "pId":"11", "name":"班车管理", "page":"pages/base/vehicle.html"},
{ "id":"114", "pId":"11", "name":"快递员设置/替班", "page":"pages/base/courier.html"},
{ "id":"115", "pId":"11", "name":"区域设置","page":"pages/base/area.html"},
{ "id":"116", "pId":"11", "name":"管理分区", "page":"pages/base/sub_area.html"},
{ "id":"117", "pId":"11", "name":"管理定区/调度排班","page":"pages/base/fixed_area.html"},
{ "id":"118", "pId":"11", "name":"收派时间管理","page":"pages/base/take_time.html"},
{ "id":"12", "pId":"0", "name":"受理"},
{ "id":"121", "pId":"12", "name":"业务受理" ,"page":"pages/take_delivery/order.html"},
{ "id":"122", "pId":"12", "name":"运单快速录入" ,"page":"pages/take_delivery/waybill_quick.html"},
{ "id":"123", "pId":"12", "name":"运单录入" ,"page":"pages/take_delivery/waybill.html"},
{ "id":"124", "pId":"12", "name":"运单导入" ,"page":"pages/take_delivery/waybill_import.html"},
{ "id":"125", "pId":"12", "name":"运单管理" ,"page":"pages/take_delivery/waybill_manage.html"},
{ "id":"126", "pId":"12", "name":"异调运单" ,"page":"pages/take_delivery/different_waybill.html"},
{ "id":"127", "pId":"12", "name":"运单打印" ,"page":"pages/take_delivery/waybill_print.html"}
]
2.HTML页面中需要引入jquery和zTree插件和样式文件
[HTML] 纯文本查看 复制代码 <link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
3.在HTML页面准备展示树形菜单的ul标签和开启编辑动作的按钮
[HTML] 纯文本查看 复制代码 <body>
<!-- 树形菜单ID -->
<ul id="zTreeId" class="ztree"></ul>
<!-- 为该按钮绑点击事件，触发编辑动作 -->
<input type="button" value="开始编辑">
</body>
4.初始化zTree菜单
[JavaScript] 纯文本查看 复制代码 //定义全局变量，做为zTree对象
var treeObj;
$(function(){
// 树初始化
var setting = {
data : {
//支持简单数据格式
simpleData : {
enable : true
}
},
//支持被选择
check : {
enable : true
}
};
//初始化菜单树。注意，此处用的是text方式接受的数据
$.ajax({
url : '../js/menu.json',
type : 'POST',
dataType : 'text',
success : function(data) {
var zNodes = eval("(" + data + ")");//将text格式数据转成json数据。必须带小括号
console.log(zNodes);//打印JSON数据信息
treeObj = $.fn.zTree.init($("#zTreeId"), setting, zNodes);//初始化zTree
},
error : function(msg) {
alert('树加载异常!');
}
});
});
初始化结构如下：
5.为“编辑”按钮绑定的函数做实现，首先，准备下要被勾选的数据，比如只让第一个树下的前三个、第二个文件夹下的第一个被勾选：
[JavaScript] 纯文本查看 复制代码 [
{ "id":"111", "pId":"11", "name":"基础档案设置", "page":"pages/base/archives.html"},
{ "id":"112", "pId":"11", "name":"收派标准", "page":"pages/base/standard.html"},
{ "id":"113", "pId":"11", "name":"班车管理", "page":"pages/base/vehicle.html"},
{ "id":"121", "pId":"12", "name":"业务受理" ,"page":"pages/take_delivery/order.html"}
]
6.实现编辑功能代码如下：
[JavaScript] 纯文本查看 复制代码 function editZTree(){
//获取可以被勾选的数据
var checkedData;
$.ajax({
url : '../js/checked.json',
type : 'POST',
dataType : 'json',
async:false, //一定要使用同步请求，否则，下面的checkedData在遍历取值的时候可能(或一定)获取不到数据
success : function(data) {
checkedData = data;
},
error : function(msg) {
alert('异常!');
}
});
//遍历获取的数据，赋值到zTree上做勾选
for(var i = 0; i < checkedData.length; i ++){
var node = treeObj.getNodeByParam("id", checkedData[i].id, null);//根据属性名和属性值确定节点
treeObj.checkNode(node, true, true);//选取该节点，并设定父子互动
}
}
勾选后效果如下：
bos_ztree.zip
(556.84 KB, 下载次数: 39)
|
|
收藏
淘帖
踩
