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

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 实现菜单级联选中效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • ExtJs动态生成treepanel的Json格式

    在节点中加上"checked"属性,会自动生成checkbox. 获取选中节点 var nodeArray = ""; var nodesObj = mytree.getChecked(); var i;var length=nodesObj .length; for (i = 0; i < length; i++) { nodeArray += nodesObj[i].id + ','; //允许多选的情况.如果不允许多选,就直接nodesObj[i].id

  • 关于extjs treepanel复选框选中父节点与子节点的问题

    关于extjs treepanel复选框选中父节点与子节点的问题

     extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点.取消所有子节点时,才能取消根节点. 复制代码 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:new Ext.tree.AsyncTreeNode({}), listeners:{ "checkchange": f

  • extjs4 treepanel动态改变行高度示例

    extjs4 treepanel动态改变行高度示例

      复制代码 代码如下: //css代码 .x-row-class{ line-height:30px; } //js代码 },{ text: '技能分配', flex: 1, width:150, dataIndex: 'skillDistribut', sortable: true, renderer:function(value, metaData, record, rowIndex, columnIndex, store){ metaData.tdAttr= "data-qtip='&q

  • extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

    复制代码 代码如下: //树 var treePanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:{}, listeners:{ render: function() { authorityTree(treePanel); /*渲染树*/ }, checkchange: function(node, state) {

  • JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

    JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

    在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点.在ExtJS中,有两种类型的树节点.一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定 义. 在数据中, text 显示文字, leaf 节点 , children 子节点,expanded 展开 var store = Ext.create('Ext.data.TreeStore', { root

  • 层序遍历在ExtJs的TreePanel中的应用

    层序遍历在ExtJs的TreePanel中的应用

    原理非常简单,就是树的层序遍历,在遍历过程中遇到第一个叶子节点即完成工作. 效果如下图:代码如下: 复制代码 代码如下: var currentRootNode = null;//当前选择的根节点 function NodeClass() { //定义一个节点类 var nodeValue = null; var nextNode = null;//下一个节点 } function InitQueue(queue) { //初始化一个队列 queue = new NodeClass();//头节

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

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能.其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text.id.icon.checked等.异步树Ext.tree.AsyncTreeNode.树加载器Ext.tree.TreeLoader.下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果. 在 treepanel 里添加以下代码即可实现级联选中效果 主要实现了以下效果: 1.点击父级批量设置所有子节点选中状

  • Jquery同辈元素选中/未选中效果的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server"&

  • Android 中TeaPickerView数据级联选择器功能的实例代码

    Github地址 YangsBryant/TeaPickerView (Github排版比较好,建议进入这里查看详情,如果觉得好,点个star吧!) 引入module allprojects { repositories { google() jcenter() maven { url 'https://www.jitpack.io' } } } implementation 'com.github.YangsBryant:TeaPickerView:1.0.2' 主要代码 public cla

  • Android 中Popwindow弹出菜单的两种方法实例

    Android 中Popwindow弹出菜单的两种方法实例 1.popWindow就是对话框的一种方式! 此文讲解的android中对话框的一种使用方式,它叫popWindow. 2.popWindow的特性 Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于: AlertDialog的位置固定,而PopupWindow的位置可以随意. AlertDialog是非阻塞线程的,而PopupWindow是阻塞线程的. PopupWindow的位置按照有无偏

  • elementUi vue el-radio 监听选中变化的实例代码

    elementUi vue el-radio 监听选中变化的实例代码如下所述: //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class="radio" label="man">男</el-radio> <el-rad

  • Django中使用jquery的ajax进行数据交互的实例代码

    Django中使用jquery的ajax进行数据交互的实例代码

    jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

  • 关于PHP中字符串与多进制转换函数的实例代码

    转换函数 /** * [字符串转换为(2,8,16进制)ASCII码] * @param string $str [待处理字符串] * @param boolean $encode [字符串转换为ASCII|ASCII转换为字符串] * @param string $intType [2,8,16进制标示] * @return string byte_str [处理结果] * @author alexander */ function strtoascii($str, $encode=true,

  • Asp.net中安全退出时清空Session或Cookie的实例代码

    概览: 网站中点击退出,如果仅仅是重定向到登录/出页面,此时在浏览器地址栏中输入登录后的某个页面地址如主页,你会发现不用登录就能访问.这种所谓的退出并不是安全的. 那么怎样做到安全退出呢? 那就是点击退出后清空相应的Session或Cookie. 清空Session的代码: Session.Clear(); Session.Abandon(); 清除Cookie的正确代码(假设Cookie名称为UserInfo): if (Request.Cookies["UserInfo"] !=

  • JavaScript中访问id对象 属性的方式访问属性(实例代码)

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JS中如何比较两个Json对象是否相等实例代码

    在js前端面试过程中,经常会遇到这样的笔试题:JS中如何比较两个Json对象是否相等实例代码,下面小编抽点时间给大家整理下,一起看看吧. 1.先准备三个工具方法,用于判断是否是对象类型,是否是数组,获取对象长度 function isObj(object) { return object && typeof (object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == &quo

随机推荐