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 相关文章推荐
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
jquery自适应布局的简单实例
May 28 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
JavaScript常用内置对象用法分析
Jul 09 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无限极分类实现方法分析
2019/07/04 PHP
accesskey 提交
2006/06/26 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python3音乐播放器简单实现代码
2020/04/20 Python
python调用百度REST API实现语音识别
2018/08/30 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
个人委托书如何写
2014/09/25 职场文书
女性励志书籍推荐
2019/08/19 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python