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如何生成xmlhttp
Dec 16 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 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开发文件系统实例讲解
2006/10/09 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP URL路由类实例
2013/11/12 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python爬取代理ip的示例
2020/12/18 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
入党自我鉴定范文
2013/10/04 职场文书
预备党员党校学习自我评价分享
2013/11/12 职场文书
小学教师听课制度
2014/02/01 职场文书
地球一小时宣传标语
2014/06/24 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
create-react-app开发常用配置教程
2022/06/25 Javascript