JQuery EasyUI Tree With Checkbox
获取节点信息 by ZYZ
在JQuery EasyUI 的官方文档中有关tree的介绍是这样的:树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
下面我们来了解下check(复选)功能:
一、属性
Tree控件的属性(不是节点属性)中有checkbox="true"的话,则整个树控件的父子节点都会有复选框。
Tree的每个节点都具备以下属性:
· id:节点ID,对加载远程数据很重要。
· text:显示节点文本。
· state:节点状态,'open' 或 'closed',默认:'open'。在设置为'closed'的时候,当前节点的子节点将会从远程服务器加载他们。
· checked:表示该节点是否被选中。
· attributes: 被添加到节点的自定义属性。
· children: 一个节点数组声明了若干节点。
其中checked属性便是控制复选框的,注意属性里的"checked":true 只对指定节点有效。节点属性如果不具有"checked":true属性便使用默认值"checked":false,也就是未选中状态。
二、事件
Tree控件的checkbox具有以下两个属性:
onBeforeCheck | node, checked | 在用户点击勾选复选框之前触发,返回false可以取消选择动作。(该事件自1.3.1版开始可用) |
onCheck | node, checked | 在用户点击勾选复选框的时候触发。 |
其中onBeforeCheck事件可作为勾选复选框时的验证条件,返回true后Checkbox才会被勾选。
一般情况下,选择onCheck事件作为勾选复选框后处理数据的事件。此次目标是勾选复选框后获取所勾选节点及其子节点的节点信息。
onCheck: function (node, checked) {……}
此外还需要用到tree控件的一个getData方法
getData | target | 获取指定节点数据,包含它的子节点。 |
var data = $('#ulTree').tree('getData',node.target);
此时获取的data是一个Object型数据,内容为此节点以及所有子节点的信息。其具备如下属性:
id:绑定节点的标识值。
text:显示的节点文本。
checked:该节点是否被选中。
state:节点状态,'open' 或 'closed'。
attributes:绑定该节点的自定义属性。
target: 目标DOM对象。
children: 子节点的数据。
通过getData获取的数据因为是一个Object型数据,所以无法通过get或者post传递给服务器的。因此需要经过一定的处理才能使用。
比较简便的方法是将Object数据转换成JS处理起来比较方便的JSON(JavaScript Object Notation)格式。语法如下
var json =JSON.stringify(data);
这里的json参数是json格式的字符串型数据,可以很方便的被JS函数处理,也可以传递到服务器由C#等代码使用。
比如我现在想让check事件触发复选或者清除节点前的checkbox。
前端代码如下:
onBeforeLoad: function (node, param) {
loading = true;
},
onLoadSuccess: function (node, data) {
loading = false;
},
onCheck: function (node, checked) {
if (loading) {//loading为true时表示树还未读取成功,终止处理onCheck事件,下同
return;
} else {
var process = "nothing"
if (checked == true)//根据checkbox状态决定操作数,true为选中checkbox,下同
process = "Add";
else if (checked == false)
process = "Remove";
var data = $('#ulModuleTree').tree('getData', node.target);
var json = JSON.stringify(data);//字符串化节点信息以便使用post方法
$.post('Ajax/ProcessAuthorityHandler.ashx', {
moduleCode: node.attributes.ModuleCode,
roleCode: roleCode,
process: process,
json:json
}, function (result) {
if (result == "fail")
alert(操作失败)
});
}
}
注意此处设置loading为处理onCheck事件的条件,是因为,loading=true时点击checkbox会引发冒泡事件,因为我在初始化函数之前便设立了一个全局变量
var loading = false; //为防止onCheck冒泡事件设置的全局变量
以防止冒泡事件。
在服务器端可以根据传递来的操作参数执行相应的命令
if (process == "Add")//执行添加操作
{
result = iBLL_SYS_RoleModule.Add(model);
}
else if (process == "Remove")//执行删除操作
{
result = iBLL_SYS_RoleModule.Delete(model);
}
EsayUI官方文档参见:
http://www.jeasyui.com/documentation/index.php
关于json参见:
http://www.json.org/json-zh.html
关于JSON.stringify 的用法参见:
http://www.cnblogs.com/damonlan/archive/2012/03/13/2394787.html