写一个树控件并没有想象中的那么容易,今天又花了我一个1个多小时,主要为IT小鲜肉 Widgets Tree控件添加了 单选、多选、选择前和选择后两个回调函数、获取选中节点的功能。后面会继续努力完善这个树控件。

1.通过设置初始化时候的选项{select:true}开启单选,通过设置初始化时候的选项{select:{type:'multiple'}}开启多选

使用实例代码如下:

运行效果如下:

2.添加了onBeforeSelect回调函数,用来实现自定义选择,如果该函数返回false会中断默认的选择行为

使用实例代码如下:

运行效果如下:

其中‘宁波’这个节点不可选择

3.添加了onAfterSelect回调函数,监听选择结束事件,无论是选中一个节点还是去选中一个节点都会调用该函数

4.添加了通过tree.itxxr_tree('getSelected')调用获取选中的节点的功能

使用实例代码如下:

运行结果如下:

IT小鲜肉 Widgets Tree 单选、多选、相关回调函数、获取选中的节点功能的更多相关文章

  1. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  2. jqurey 遍历 div内的所有input单选复选按钮并判断是否选中及Attr(checked)无效的解决

    关于页面前面标签 <ul> @{ foreach (var item in vote) { if (!string.IsNullOrEmpty(item.Img)) { <li cl ...

  3. jquery实现全选、全不选、反选、获取选中的所有值总结

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html> <html> <head& ...

  4. IT小鲜肉 widgets tree 三种格式数据源

    昨天完成了下面几个功能,其中最麻烦的就是做图.边学GIMP用法边做图 1.使用GIMP软件G了几个图标 2.支持一维数组数据源,并按照指定的属性对数据源中的数据进行自动分组 运行效果: 3.支持由pi ...

  5. Jquery 多选全选/取消 选项卡切换 获取选中的值

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

    https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...

  7. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  8. ExtJS 刷新或者重载Tree后,默认选中刷新前最后一次选中的节点代码片段

    //tree对象 var tree = Main.getPageControler().treePanel; //获取选中的节点 var node = tree.getSelectionModel() ...

  9. 关于textjs的tree带复选框的树

    通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...

随机推荐

  1. 一:My Batis快速入门

    ---恢复内容开始--- 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检 ...

  2. express+nodemon 修改后浏览器自动刷新

    添加nodemon模块 cnpm install --save nodemon 根目录添加文件 nodemon.json { "restartable": "rs&quo ...

  3. Linux下超级命令htop的学习使用

    top作为日常管理工作中最常用也是最重要的Linux系统监控工具之一,可以动态观察系统进程状况.但其缺点就是只支持键盘操作,显示也单调.作为刚才Windows转到Linux的我来说,现在有了一个更好的 ...

  4. 模拟登陆+数据爬取 (python+selenuim)

    以下代码是用来爬取LinkedIn网站一些学者的经历的,仅供参考,注意:不要一次性大量爬取会被封号,不要问我为什么知道 #-*- coding:utf-8 -*- from selenium impo ...

  5. Filter应用之-自动登录

    自动登录,是为了帮助用户多次使用这个网页时,不用再次输入用户名和密码就可以登录. 是指用户将用户的登录信息,人,保存到本地的文件中Cookie中. Name,value – 声明时 new Cooki ...

  6. 慕课网Python基础学习整理

    # -*- coding: utf-8 -*- """# Python的注释以 # 开头,后面的文字直到行尾都算注释;多行注释开头3个 " 结尾3个 " ...

  7. 分区助手里如何从临近盘(如D盘)抽取一定的空间给已经快满了的盘(如E盘)(博主推荐)(图文详解)

    不多说,直接上干货! 分区助手是什么?(博主推荐)(图文详解) 分区助手各版本比较(图文详解) 分区助手官网使用教程(专业版.绿色版和WinPE版)(图文详解) 安装分区助手时出现“分区助手已安装到你 ...

  8. Linux发行版,分类,CentOS下载

    目录 Debian 系(dpkg) 1. 包管理 2. 发行版 Red Hat 系(rpm) 1. 包管理 2. 发行版 其他发行版   Debian 系(dpkg) 1. 包管理 包管理器:dpkg ...

  9. HTML引入CSS样式的四种方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式          行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...

  10. Rails中实现批量删除

    在Rails生成的控制器模版中,包含的destroy只能处理单个对象,而批量删除要求能够同时处理多个对象,这需要自定义一个批量操作action.批量删除的效果图如下: