JQuery EasyUI Tree With Checkbox 获取节点信息

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
获取指定节点数据，包含它的子节点。
在JS代码中可以这样写

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