DWZ (JUI) 教程 tree 控件的选中事件
DWZ (JUI) 教程 tree 控件的选中事件
先简单说一下流程
第一步 当然是先定义好回调事件了
function checkCallback(json){
...........
...........
}
关键是回调函数返回的结构 {checked:布尔值, items:数组}
如果是选中事件 checked 为 true 否则为false
items 是个对象数组 [ {name:, value:, text: },{} ] 是返回是选中的节点,如果返回的checked 为false 就是反选事件 ,那么它的长度就会是0
name 就是节点名称 value 就是对应的值 text 就是节点对应的文本 对应 节点的 tname tvalue ,<a>text</a> 文本信息
tree控件自动是级联的,选中父节点,子节点也会选中,所以返回的的选中节点是个数组,当然如果是叶子节点,那么它的长度就是1
第二步 就是注册到dom元素上
<ul class="tree treeFolder treeCheck expand" oncheck="checkCallback">
这样就可以了 其实使用起来 也挺方便。
setTimeout(function(){
if($this.hasClass("treeCheck")){
//获取选中事件 就是注册到dom元素上的事件
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 = [];
if(checked){
//看一下源码结构 其实是获取到节点的li 元素
var tnode = $(ckbox).parent().parent();
//获取所有节点下才checkbox
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")};
}
}
//调用函数
checkFn({checked:checked, items:items});
});
});
}
}
DWZ (JUI) 教程 tree 控件的选中事件的更多相关文章
- duilib进阶教程 -- Container控件的bug (14)
在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...
- duilib进阶教程 -- 各种控件的响应 (10)
到上一个教程为止,界面显示的代码就都介绍完啦,现在开始介绍控件的响应,其实在<2013 duilib入门简明教程 -- 事件处理和消息响应 (17)>里已经列出了duilib自己定义的所有 ...
- antd的Tree控件实现点击展开功能
antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击 ...
- Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates
上篇,介绍了控件样式(Style)和模板(Template)的基础概念,并且演示了使用Blend设计控件样式.本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate.Con ...
- Duilib教程-控件练习
一.控件消息的响应. 在HelloDuilib例子中,程序不能退出,在这里,我将添加一个关闭按钮,当点击它时,调用PostQuitMessage进行退出. 首先在界面的右上角添加一个关闭按钮,并取名为 ...
- vue+element项目中使用el-dialog弹出Tree控件报错问题
1. 按正常的点击按钮,显示dialog弹出的Tree控件,然后把该条数据下的已经选中的checkbox , 用setCheckedNodes或者setCheckedKeys方法选择上 , 报下面这个 ...
- 【转】PyQt5系列教程(七)控件
PyQt5系列教程(七)控件 软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...
- CPF 入门教程 - 各个控件介绍(八)
CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...
- 在MonthCalendar控件中选中日期
Calendar.MONTH Calendar now=Calendar.getInstance();System.out.print(now.get(Calendar.MONTH));得到的月份少1 ...
随机推荐
- python批量GBK转UTF-8
有时候编码问题在导入工程的时候很烦,所以还是让世界都是"UTF-8"吧. 抄来一段代码: #!/usr/env python # -*- coding: utf8 -*- impo ...
- UVA 12906 Maximum Score 排列组合
Maximum Score Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vie ...
- uoj #5. 【NOI2014】动物园 kmp
#5. [NOI2014]动物园 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/5 Description 近日 ...
- Shadow Mapping 的原理与实践(一)
早在上世纪七十年代末,Williams在他的“Casting Curved Shadows on Curved Surface”一文中提出了名为Shadow Map的阴影生成技术.之后,他人在此基础上 ...
- Swift之UIBezierPath
使用UIBezierPath可以创建基于矢量的路径.使用此类可以定义简单的形状,如椭圆.矩形或者有多个直线和曲线段组成的形状等.主要用到的该类的属性包括 moveToPoint: //设置起始点 ad ...
- vs开发工具之--自动生成注释
GhostDoc是Visual Studio的一个免费插件,轻松一个快捷键CTRL+SHIFT+D就能够帮助自动生成注释 下载地址:http://submain.com/download/ghostd ...
- 剑指 offer set 4 矩形覆盖
总结 1. 斐波那契数列的变形题, 但是稍有隐晦, 有点意思 2. 求解 f(3) 时, 最后一块矩形可以竖着放, 也可以两块矩形横着放, 分别对应于 f(2) 和 f(1) ------------ ...
- ios中@class和 #import,两种方式的讨论
转自:http://blog.sina.com.cn/s/blog_a843a8850101b6a7.html 很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在 ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- 一款基于jQuery底部带缩略图的焦点图
之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...