Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码


Posted in Javascript onAugust 22, 2017

TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。

在 treepanel 里添加以下代码即可实现级联选中效果

主要实现了以下效果:

1.点击父级批量设置所有子节点选中状态

2.点击当前节点寻找所有父级并设置选中状态

3.取消当前节点并取消所有子节点选中状态

4.取消当前节点根据需要取消上级节点的选中状态

listeners:{
  checkchange:function(node,checked,eOpts){
    // 批量设置子节点选中效果
    function setChildChecked(pNode){
      pNode.set('checked',checked);
      pNode.eachChild(function(child){
        arguments.callee(child);
      })
    }
    setChildChecked(node);
    // 当前节点取消选中时 需要判断当前节点的父节点下的所有子节点是否都不是选中状态
    function setParentCheckedFalse(currentNode){
      var parentNode = currentNode.parentNode,
        isValid = true;
      if(parentNode != null){
        if(checked == false){
          parentNode.eachChild(function (child) {
            if(child.get('checked') != false){
              isValid = false;
              return false;
            }
          });
          if(isValid){
            parentNode.set('checked',checked);
          }
        }else{
          parentNode.set('checked',true);
        }
        arguments.callee(parentNode)
      }
    }
    setParentCheckedFalse(node);
  }
}

总结

以上所述是小编给大家介绍的Extjs 中 Treepanel 实现菜单级联选中效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 #Javascript
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 #Javascript
bootstrap multiselect下拉列表功能
Aug 22 #Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 #Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 #Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP数据类型的总结分析
2013/06/13 PHP
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python实现微信打飞机游戏
2020/03/24 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
全球度假村:Club Med
2017/11/27 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
买卖协议书范本
2014/04/21 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
检讨书格式
2015/01/23 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
python如何做代码性能分析
2021/04/26 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
python高温预警数据获取实例
2022/07/23 Python