UI中 tree Checkbox 組件

在官方文檔中提供的oncheck事件中只能夠獲取當(dāng)前點(diǎn)擊的權(quán)限值,而無(wú)法獲取其他選中的值

<ul class="tree treeFolder treeCheck expand" oncheck="kkk">
<li><a >框架面板</a>
<ul>
<li><a tname="name" tvalue="value1" checked="true">我的主頁(yè)</a></li>
<li><a tname="name" tvalue="value2">頁(yè)面一</a></li>
<li><a tname="name" tvalue="value3">替換頁(yè)面一</a></li>
<li><a tname="name" tvalue="value4">頁(yè)面二</a></li>
<li><a tname="name" tvalue="value5">頁(yè)面三</a></li>
</ul>
</li>
? ? ? ? ? ? ? ? ? ? ? ?<li><a>權(quán)限5</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a tname="name" tvalue="權(quán)限5-1" checked="true">權(quán)限5-1</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a tname="name" tvalue="權(quán)限5-2" checked="true">權(quán)限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原來(lái)的基礎(chǔ)上增加了 一個(gè)名為 allItems的數(shù)組,其存儲(chǔ)的格式和items的格式一個(gè),只是items存儲(chǔ)的是當(dāng)前選中的值,而allItems存儲(chǔ)的是所有選中的值.

代碼如下：

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存儲(chǔ)當(dāng)前選中的所有值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var allSelectedItems = [];

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//獲取所有選中的boxes

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//清除所有舊數(shù)據(jù)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?allSelectedItems.splice(0);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if (allCheckedBoxes.size() > 0) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(allCheckedBoxes).each(function () {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//增加數(shù)據(jù)到數(shù)組中

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?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") };
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//增加一個(gè)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("當(dāng)前選中的值：" + result + " ?所有選中的值："+allResult);
}
</script>

最終結(jié)果：

到此已經(jīng)完美獲取到了想要的數(shù)據(jù).(圖中樹(shù)形與Demo數(shù)據(jù)不同,但是結(jié)構(gòu)是一樣的,不影響結(jié)果)

總結(jié)

以上是生活随笔為你收集整理的DWZ-JUI 树形Checkbox组件 无法一次获取所有选中的值的解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。