easyui tree带checkbox实现单选的简单实例


Posted in Javascript onNovember 07, 2016

实例如下:

<ul id="regionTree"></ul>
$('#regionTree').tree({
      cascadeCheck: false,
      //onlyLeafCheck: true,
      checkbox: true,
      data: [{
        "id": 1,
        "text": "My Documents",
        "children": [{
          "id": 11,
          "text": "Photos",
          "state": "closed",
          "children": [{
            "id": 111,
            "text": "Friend"
          }, {
            "id": 112,
            "text": "Wife"
          }, {
            "id": 113,
            "text": "Company"
          }]
        }, {
          "id": 12,
          "text": "Program Files",
          "children": [{
            "id": 121,
            "text": "Intel"
          }, {
            "id": 122,
            "text": "Java",
            "attributes": {
              "p1": "Custom Attribute1",
              "p2": "Custom Attribute2"
            }
          }, {
            "id": 123,
            "text": "Microsoft Office"
          }, {
            "id": 124,
            "text": "Games",
            "checked": true
          }]
        }, {
          "id": 13,
          "text": "index.html"
        }, {
          "id": 14,
          "text": "about.html"
        }, {
          "id": 15,
          "text": "welcome.html"
        }]
      }]
      ,
      width: 160,
      height: 32,
      panelHeight: 400,
      onSelect: function (node) {
        var cknodes = $('#regionTree').tree("getChecked");
        for (var i = 0; i < cknodes.length; i++) {
          if (cknodes[i].id != node.id) {
            $('#regionTree').tree("uncheck", cknodes[i].target);
          }
        }
        if (node.checked) {
          $('#regionTree').tree('uncheck', node.target);

        } else {
          $('#regionTree').tree('check', node.target);

        }

      },
      onLoadSuccess: function (node, data) {
        $(this).find('span.tree-checkbox').unbind().click(function () {
          $('#regionTree').tree('select', $(this).parent());
          return false;
        });
      }
    })

关键代码:

onSelect: function (node) {
        var cknodes = $('#regionTree').tree("getChecked");
        for (var i = 0; i < cknodes.length; i++) {
          if (cknodes[i].id != node.id) {
            $('#regionTree').tree("uncheck", cknodes[i].target);
          }
        }
        if (node.checked) {
          $('#regionTree').tree('uncheck', node.target);

        } else {
          $('#regionTree').tree('check', node.target);

        }

      },
      onLoadSuccess: function (node, data) {
        $(this).find('span.tree-checkbox').unbind().click(function () {
          $('#regionTree').tree('select', $(this).parent());
          return false;
        });
      }

以上这篇easyui tree带checkbox实现单选的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
vue.js初学入门教程(2)
Nov 07 #Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 #Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 #Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 #Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 #Javascript
AngularJS实现Input格式化的方法
Nov 07 #Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 #Javascript
You might like
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
js面向对象的写法
2016/02/19 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python实现同一局域网下传输图片
2020/03/20 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
网络工程师自荐书范文
2014/04/01 职场文书
请假条范文大全
2014/04/10 职场文书
公司节能减排倡议书
2014/05/14 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
公司感谢信范文
2015/01/22 职场文书
建议书范文
2015/02/05 职场文书
学习nginx基础知识
2021/09/04 Servers