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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
如何通过vscode运行调试javascript代码
Jul 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php版微信数据统计接口用法示例
2016/10/12 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python MD5加密实例详解
2017/08/02 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python采集微信公众号文章
2018/12/20 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python对列表的操作知识点详解
2019/08/20 Python
如何用Django处理gzip数据流
2021/01/29 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
运动会通讯稿500字
2014/02/20 职场文书
欢迎横幅标语
2014/06/17 职场文书
应用心理学专业求职信
2014/08/04 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
九年级历史教学反思
2016/02/19 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
python编写五子棋游戏
2021/05/25 Python
Python re.sub 反向引用的实现
2021/07/07 Python
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers