UI中 tree Checkbox 组件

在官方文档中提供的oncheck事件中只能够获取当前点击的权限值,而无法获取其他选中的值

<ul class="tree treeFolder treeCheck expand" oncheck="kkk">
<li><a >框架面板</a>
<ul>
<li><a tname="name" tvalue="value1" checked="true">我的主页</a></li>
<li><a tname="name" tvalue="value2">页面一</a></li>
<li><a tname="name" tvalue="value3">替换页面一</a></li>
<li><a tname="name" tvalue="value4">页面二</a></li>
<li><a tname="name" tvalue="value5">页面三</a></li>
</ul>
</li>
                       <li><a>权限5</a>
                            <ul>
                                <li><a tname="name" tvalue="权限5-1" checked="true">权限5-1</a></li>
                                <li><a tname="name" tvalue="权限5-2" checked="true">权限5-2</a></li>
                            </ul>
                        </li>
<li><a tname="name" tvalue="test1">Test 1</a>
<ul>
<li><a tname="name" tvalue="test1.1">Test 1.1</a>
<ul>
<li><a tname="name" tvalue="test1.1.1" checked="true">Test 1.1.1</a></li>
<li><a tname="name" tvalue="test1.1.2" checked="false">Test 1.1.2</a></li>
</ul>
</li>
<li><a tname="name" tvalue="test1.2" checked="true">Test 1.2</a></li>
</ul>
</li>
<li><a tname="name" tvalue="test2" checked="true">Test 2</a></li>
</ul>

<script type="text/JavaScript">
function kkk(){
var json = arguments[0], result="";
// alert(json.checked);

$(json.items).each(function(i){
result += "<p>name:"+this.name + " value:"+this.value+" text: "+this.text+"</p>";
});
$("#resultBox").html(result);

}
</script>

如此,本人在JUI原来的基础上增加了 一个名为 allItems的数组,其存储的格式和items的格式一个,只是items存储的是当前选中的值,而allItems存储的是所有选中的值.

代码如下：

dwz.tree.js文件中

setTimeout(function () {
                     if ($this.hasClass("treeCheck")) {
                         var checkFn = eval($this.attr("oncheck"));
                         if (checkFn && $.isFunction(checkFn)) {

$("div.ckbox", $this).each(function () {
                                 var ckbox = $(this);
                                 ckbox.click(function () {
                                     var checked = $(ckbox).hasClass("checked");
                                     var items = [];

//增加allItems存储当前选中的所有值

var allSelectedItems = [];

//获取所有选中的boxes

var allCheckedBoxes = $("div.checked", $this);

//清除所有旧数据

allSelectedItems.splice(0);

if (allCheckedBoxes.size() > 0) {

$(allCheckedBoxes).each(function () {

//增加数据到数组中

allSelectedItems.push({ name: $(this).find("input").eq(0).attr("name"), value: $(this).find("input").eq(0).val(), text: $(this).find("input").eq(0).attr("text") });

});

}

if (checked) {

var tnode = $(ckbox).parent().parent();
                                         var boxes = $("input", tnode);
                                         if (boxes.size() > 1) {
                                             $(boxes).each(function () {
                                                 items[items.length] = { name: $(this).attr("name"), value: $(this).val(), text: $(this).attr("text") };
                                             });
                                         } else {
                                             items = { name: boxes.attr("name"), value: boxes.val(), text: boxes.attr("text") };
                                         }
                                     }

//增加一个allItems:allSelectedItems 
                                     checkFn({ checked: checked, items: items,allItems:allSelectedItems });
                                 });
                             });
                         }
                     }

在把官方的Demo中的kkk()改造一下就可以获取到所有选中的值了,代码如下：

<script type="text/javascript">
function kkk(){
var json = arguments[0], result="",allResult="";
// alert(json.checked);

$(json.items).each(function(i){
result += "<p>name:"+this.name + " value:"+this.value+" text: "+this.text+"</p>";
});

$(json.allItems).each(function(i){
allResult+= "<p>name:"+this.name + " value:"+this.value+" text: "+this.text+"</p>";
});

alert("当前选中的值：" + result + "  所有选中的值："+allResult);

}
</script>

最终结果：

到此已经完美获取到了想要的数据.(图中树形与Demo数据不同,但是结构是一样的,不影响结果)