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实现奇偶行赋值不同css值
Feb 17 Javascript
js导出txt示例代码
Jan 14 Javascript
Three.js快速入门教程
Sep 09 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 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中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
String和StringBuffer的区别
2015/08/13 面试题
岗位职责定义及内容
2013/11/08 职场文书
庆八一活动方案
2014/01/25 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
庭外和解协议书
2016/03/23 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL