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 控件的选中事件的更多相关文章

  1. duilib进阶教程 -- Container控件的bug (14)

    在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...

  2. duilib进阶教程 -- 各种控件的响应 (10)

    到上一个教程为止,界面显示的代码就都介绍完啦,现在开始介绍控件的响应,其实在<2013 duilib入门简明教程 -- 事件处理和消息响应 (17)>里已经列出了duilib自己定义的所有 ...

  3. antd的Tree控件实现点击展开功能

    antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击 ...

  4. Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates

    上篇,介绍了控件样式(Style)和模板(Template)的基础概念,并且演示了使用Blend设计控件样式.本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate.Con ...

  5. Duilib教程-控件练习

    一.控件消息的响应. 在HelloDuilib例子中,程序不能退出,在这里,我将添加一个关闭按钮,当点击它时,调用PostQuitMessage进行退出. 首先在界面的右上角添加一个关闭按钮,并取名为 ...

  6. vue+element项目中使用el-dialog弹出Tree控件报错问题

    1. 按正常的点击按钮,显示dialog弹出的Tree控件,然后把该条数据下的已经选中的checkbox , 用setCheckedNodes或者setCheckedKeys方法选择上 , 报下面这个 ...

  7. 【转】PyQt5系列教程(七)控件

    PyQt5系列教程(七)控件   软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...

  8. CPF 入门教程 - 各个控件介绍(八)

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

  9. 在MonthCalendar控件中选中日期

    Calendar.MONTH Calendar now=Calendar.getInstance();System.out.print(now.get(Calendar.MONTH));得到的月份少1 ...

随机推荐

  1. python批量GBK转UTF-8

    有时候编码问题在导入工程的时候很烦,所以还是让世界都是"UTF-8"吧. 抄来一段代码: #!/usr/env python # -*- coding: utf8 -*- impo ...

  2. UVA 12906 Maximum Score 排列组合

    Maximum Score Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vie ...

  3. uoj #5. 【NOI2014】动物园 kmp

    #5. [NOI2014]动物园 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/5 Description 近日 ...

  4. Shadow Mapping 的原理与实践(一)

    早在上世纪七十年代末,Williams在他的“Casting Curved Shadows on Curved Surface”一文中提出了名为Shadow Map的阴影生成技术.之后,他人在此基础上 ...

  5. Swift之UIBezierPath

    使用UIBezierPath可以创建基于矢量的路径.使用此类可以定义简单的形状,如椭圆.矩形或者有多个直线和曲线段组成的形状等.主要用到的该类的属性包括 moveToPoint: //设置起始点 ad ...

  6. vs开发工具之--自动生成注释

    GhostDoc是Visual Studio的一个免费插件,轻松一个快捷键CTRL+SHIFT+D就能够帮助自动生成注释 下载地址:http://submain.com/download/ghostd ...

  7. 剑指 offer set 4 矩形覆盖

    总结 1. 斐波那契数列的变形题, 但是稍有隐晦, 有点意思 2. 求解 f(3) 时, 最后一块矩形可以竖着放, 也可以两块矩形横着放, 分别对应于 f(2) 和 f(1) ------------ ...

  8. ios中@class和 #import,两种方式的讨论

    转自:http://blog.sina.com.cn/s/blog_a843a8850101b6a7.html 很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在 ...

  9. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  10. 一款基于jQuery底部带缩略图的焦点图

    之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...