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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
node.js实现爬虫教程
Aug 25 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 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
php str_pad 函数用法简介
2009/07/11 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
大学生作弊检讨书
2014/02/19 职场文书
现金出纳岗位职责
2014/03/15 职场文书
《泉水》教学反思
2014/04/11 职场文书
给老婆的保证书范文
2014/04/28 职场文书
公司建议书怎么写
2014/05/15 职场文书
超市主管竞聘书
2015/09/15 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android