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數據不同,但是結構是一樣的,不影響結果)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。