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不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python发展简史 Python来历
2019/05/14 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
超市端午节活动方案
2014/01/23 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2014教师年度工作总结
2014/11/10 职场文书
退伍军人感言
2015/08/01 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Python Parser的用法
2021/05/12 Python