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 相关文章推荐
javascript深入理解js闭包
Jul 03 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
详解Vue底部导航栏组件
May 02 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 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、php5的mysql数据库操作类
2008/01/10 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
将python代码和注释分离的方法
2018/04/21 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python序列类型种类详解
2020/02/26 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python map及filter函数使用方法解析
2020/08/06 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
借款协议书
2014/04/12 职场文书
大学生标准自荐书
2014/06/15 职场文书
班级文化标语
2014/06/23 职场文书
公司员工离职证明书
2014/10/04 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
药房管理制度范本
2015/08/06 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL