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数据不同,但是结构是一样的,不影响结果)
DWZ-JUI 树形Checkbox组件 无法一次获取所有选中的值的解决方法的更多相关文章
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- restsharp 组件调用返回 gbk 编码的api,中文乱码解决方法。(restsharp response 中文乱码 gbk)
最近要调一个restful风格的api 用了 一个开源第三方组件,组件还是蛮好用的, 支持直接按参数定义实体类,然后发起请求之前直接 addobject 的方式就把请求参数给添加进去了, 解码的时候可 ...
- angular父组件通过@ViewChild 主动获取子组 件的数据和方法
1.调用子组件给子组件定义一个名称 <app-footer #footerChild></app-footer> 2. 引入 ViewChild import { Compon ...
- vue_相同组件,不同url跳转不重新渲染的解决方法
最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型.现在产品的需求是,跳转到不同的类型 需要页面重新渲染数据 那么问题来了. 我试了好几种方法,用watch监听路由去判断,但是发现输在inp ...
- DWZ (JUI) 教程 tree 控件的选中事件
DWZ (JUI) 教程 tree 控件的选中事件 先简单说一下流程 第一步 当然是先定义好回调事件了 function checkCallback(json){ ........... ...... ...
- 实现checkbox组件化(Component)
之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...
- DWZ(JUI) 教程 左侧栏默认是关闭状态的问题
DWZ(JUI) 教程 左侧栏默认是关闭状态的问题,初始化是全屏状态,只需简单处理就可以了 $(function(){ DWZ.init("dwz.frag.xml", { log ...
- 【转】Android学习基础自定义Checkbox组件
原文网址:http://forum.maiziedu.com/thread-515-1-1.html heckbox组件是一种可同时选中多项的基础控件,即复选框,在android学习中,Checkbo ...
随机推荐
- 谈谈用ASP.NET开发的大型网站有哪些架构方式(成本)
在上篇文章里(http://www.cnblogs.com/ms0017/archive/2011/07/26/2117676.html),列举了国内外用ASP.NET开发的大型网站有哪些.最后提到了 ...
- Spring Batch 批处理框架
<Spring Batch 批处理框架>基本信息作者: 刘相 出版社:电子工业出版社ISBN:9787121252419上架时间:2015-1-24出版日期:2015 年2月开本:16开页 ...
- 0001 Oracle数据库安装
从这个月初开始学习Oracle,因为完全是零起步,就从Oracle的下载安装开始一点一点学起,今天把系统重新做了,就再安装了一遍Oracle11gR2,把安装过程记录一下: 一.安装Oracle数据库 ...
- solrconfig.xml介绍
说明:请务必先了解如下知识,否则阅读本文会晕. Solr术语介绍:SolrCloud,单机Solr,Collection,Shard,Replica,Core之间的关系 Solr通过三个主要文件来作配 ...
- Nginx 切片模块、断点续传
熟悉 CDN 行业主流技术的朋友应该都比较清楚,虽然 Nginx 近几年发展的如日中天,但是基本上没有直接使用它自带的 proxy_cache 模块来做缓存的,原因有很多,例如下面几个: 不支持多盘 ...
- python爬取并下载麦子学院所有视频教程
一.主要思路 scrapy爬取是有课程地址及名称 使用multiprocessing进行下载 就是为了爬点视频,所以是简单的代码堆砌 想而未实行,进行共享的方式 二.文件说明 itemsscray字段 ...
- 003.同时Ping多个IP(select实现IO复用,信号计时),ping程序升级版
写这个的目的主要是为了以后的方便: 1.信号计时函数的使用 2.ip头的构建和icmp头的构建 3.selec函数t的用法 代码实现: /src/ping.h /* * ping.h * * Crea ...
- selenium结合sikuliX操作Flash网页
sikuli的官网地址:http://www.sikuli.org 首先下载sikuliX的jar包:https://launchpad.net/sikuli/sikulix/1.1.0 java-d ...
- sobel算子原理及opencv源码实现
sobel算子原理及opencv源码实现 简要描述 sobel算子主要用于获得数字图像的一阶梯度,常见的应用和物理意义是边缘检测. 原理 算子使用两个33的矩阵(图1)算子使用两个33的矩阵(图1)去 ...
- 在Docker中运行web应用
启动一个简单的web 应用 使用社区提供的模板,启动一个简单的web应用,熟悉下各种Docker命令的使用: # docker run -d -P training/webapp python app ...