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 使用手册(六)
Sep 23 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JavaScript实现轮播图片完整代码
Mar 07 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
使用 php4 加速 web 传输
2006/10/09 PHP
php 错误处理经验分享
2011/10/11 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php创建无限级树型菜单
2015/11/05 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
jquery常用操作小结
2014/07/21 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python3大文件解压和基本操作
2017/12/15 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
golang/python实现归并排序实例代码
2020/08/30 Python
中文教师求职信
2014/02/22 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
反四风对照检查材料
2014/09/22 职场文书
授权委托书怎么写
2014/09/25 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
《刷子李》教学反思
2016/02/20 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python