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 相关文章推荐
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
Vue的生命周期一起来看看
Feb 24 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函数
2008/10/03 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php常用的url处理函数总结
2014/11/19 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
用jquery存取照片的具体实现方法
2013/06/30 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python处理html转义字符的方法详解
2016/07/01 Python
python 中的int()函数怎么用
2017/10/17 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python学生信息管理系统修改版
2018/03/13 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python 类的特殊成员解析
2018/06/20 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python db类用法说明
2020/07/07 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
物流仓储计划书
2014/01/10 职场文书
公司合作协议书范本
2014/04/18 职场文书
协议书模板
2014/04/23 职场文书
详解Python中的for循环
2022/04/30 Python