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组件 无法一次获取所有选中的值的解决方法的更多相关文章

  1. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  2. checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. restsharp 组件调用返回 gbk 编码的api,中文乱码解决方法。(restsharp response 中文乱码 gbk)

    最近要调一个restful风格的api 用了 一个开源第三方组件,组件还是蛮好用的, 支持直接按参数定义实体类,然后发起请求之前直接 addobject 的方式就把请求参数给添加进去了, 解码的时候可 ...

  4. angular父组件通过@ViewChild 主动获取子组 件的数据和方法

    1.调用子组件给子组件定义一个名称 <app-footer #footerChild></app-footer> 2. 引入 ViewChild import { Compon ...

  5. vue_相同组件,不同url跳转不重新渲染的解决方法

    最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型.现在产品的需求是,跳转到不同的类型 需要页面重新渲染数据 那么问题来了. 我试了好几种方法,用watch监听路由去判断,但是发现输在inp ...

  6. DWZ (JUI) 教程 tree 控件的选中事件

    DWZ (JUI) 教程 tree 控件的选中事件 先简单说一下流程 第一步 当然是先定义好回调事件了 function checkCallback(json){ ........... ...... ...

  7. 实现checkbox组件化(Component)

    之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...

  8. DWZ(JUI) 教程 左侧栏默认是关闭状态的问题

    DWZ(JUI) 教程 左侧栏默认是关闭状态的问题,初始化是全屏状态,只需简单处理就可以了 $(function(){ DWZ.init("dwz.frag.xml", { log ...

  9. 【转】Android学习基础自定义Checkbox组件

    原文网址:http://forum.maiziedu.com/thread-515-1-1.html heckbox组件是一种可同时选中多项的基础控件,即复选框,在android学习中,Checkbo ...

随机推荐

  1. 谈谈用ASP.NET开发的大型网站有哪些架构方式(成本)

    在上篇文章里(http://www.cnblogs.com/ms0017/archive/2011/07/26/2117676.html),列举了国内外用ASP.NET开发的大型网站有哪些.最后提到了 ...

  2. Spring Batch 批处理框架

    <Spring Batch 批处理框架>基本信息作者: 刘相 出版社:电子工业出版社ISBN:9787121252419上架时间:2015-1-24出版日期:2015 年2月开本:16开页 ...

  3. 0001 Oracle数据库安装

    从这个月初开始学习Oracle,因为完全是零起步,就从Oracle的下载安装开始一点一点学起,今天把系统重新做了,就再安装了一遍Oracle11gR2,把安装过程记录一下: 一.安装Oracle数据库 ...

  4. solrconfig.xml介绍

    说明:请务必先了解如下知识,否则阅读本文会晕. Solr术语介绍:SolrCloud,单机Solr,Collection,Shard,Replica,Core之间的关系 Solr通过三个主要文件来作配 ...

  5. Nginx 切片模块、断点续传

    熟悉 CDN 行业主流技术的朋友应该都比较清楚,虽然 Nginx 近几年发展的如日中天,但是基本上没有直接使用它自带的 proxy_cache 模块来做缓存的,原因有很多,例如下面几个: 不支持多盘 ...

  6. python爬取并下载麦子学院所有视频教程

    一.主要思路 scrapy爬取是有课程地址及名称 使用multiprocessing进行下载 就是为了爬点视频,所以是简单的代码堆砌 想而未实行,进行共享的方式 二.文件说明 itemsscray字段 ...

  7. 003.同时Ping多个IP(select实现IO复用,信号计时),ping程序升级版

    写这个的目的主要是为了以后的方便: 1.信号计时函数的使用 2.ip头的构建和icmp头的构建 3.selec函数t的用法 代码实现: /src/ping.h /* * ping.h * * Crea ...

  8. selenium结合sikuliX操作Flash网页

    sikuli的官网地址:http://www.sikuli.org 首先下载sikuliX的jar包:https://launchpad.net/sikuli/sikulix/1.1.0 java-d ...

  9. sobel算子原理及opencv源码实现

    sobel算子原理及opencv源码实现 简要描述 sobel算子主要用于获得数字图像的一阶梯度,常见的应用和物理意义是边缘检测. 原理 算子使用两个33的矩阵(图1)算子使用两个33的矩阵(图1)去 ...

  10. 在Docker中运行web应用

    启动一个简单的web 应用 使用社区提供的模板,启动一个简单的web应用,熟悉下各种Docker命令的使用: # docker run -d -P training/webapp python app ...