zoukankan      html  css  js  c++  java
  • DWZ-JUI 树形Checkbox组件 无法一次获取所有选中的值的解决方法

    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数据不同,但是结构是一样的,不影响结果)

  • 相关阅读:
    基于JWT用户认证方式(前后端分离)
    git推送时报错:hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing
    (fields.E210) Cannot use ImageField because Pillow is not installed....解决方法
    python3.6报错:AttributeError: 'str' object has no attribute 'decode'
    于在Python3.6.7 +Ubuntu16.04下安装channels报错
    docsify 搭建优雅项目文档
    SQLSERVER 系统表查询
    数据立方建立-如何实现一对多,多对多
    从BI分析角度,数据立方的建立方法
    MYSQL库内所有表名及表结构获取
  • 原文地址:https://www.cnblogs.com/soundcode/p/6163963.html
Copyright © 2011-2022 走看看