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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
vue实现简单loading进度条
Jun 06 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP多进程编程实例详解
2017/07/19 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
财务会计应届生求职信
2013/11/24 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
学习交流会主持词
2014/04/01 职场文书
交通事故调解协议书
2014/04/16 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
新教师个人总结
2015/02/06 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书