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 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
js实现抽奖功能
Nov 24 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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 字符串替换的方法
2012/01/10 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python应用库大全总结
2018/05/30 Python
Python如何发布程序的详细教程
2018/10/09 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
详解Python3 基本数据类型
2019/04/19 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
python中count函数简单用法
2020/01/05 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
小学生学习保证书
2015/02/26 职场文书
文艺晚会开场白
2015/05/29 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
Python中super().__init__()测试以及理解
2021/12/06 Python