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 相关文章推荐
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
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
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python之reload流程实例代码解析
2018/01/29 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
EJB3.1都有哪些改进
2012/11/17 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL
Redis高可用集群redis-cluster详解
2022/03/20 Redis
vue动态绑定style样式
2022/04/20 Vue.js