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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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/13 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
JS分页的实现(同步与异步)
2017/09/16 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python 字符串和整数的转换方法
2018/06/25 Python
python语言基本语句用法总结
2019/06/11 Python
人工神经网络算法知识点总结
2019/06/11 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python Map 函数的使用
2020/08/28 Python
浅析Python中字符串的intern机制
2020/10/03 Python
代理商会议邀请函
2014/01/27 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
在职证明书模板
2015/06/15 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书