`
john.zhang
  • 浏览: 16101 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext4 treePanel 设计节点级联选中

阅读更多

1、panel代码:

Ext.create('Ext.tree.Panel', {
  id : 'addRolePanelId2',
  title: '权限',
  region : 'center',
  layout : 'fit',
  height:400,
  buttonAlign : 'center',
  root:{
  id:'root',
  text:'权限列表',
  expanded:true,
  checked : false,
  leaf:false
  },
  store: addRolePermissionStore,    
  autoScroll:true,//自动出现滚动条  
  containerScroll: true,//是否支持滚动条
  rootVisible: true,
  listeners: {
     //添加监听 设置树的节点选择的级联关系
     checkchange: function(node, checked) {
      listenerCheck(node, checked);
  }
  }});


//2 添加监听 设置树的节点选择的级联关系
 var listenerCheck = function(node, checked) {
      childHasChecked(node,checked);
             var parentNode = node.parentNode;
             if(parentNode != null) {   
              parentCheck(parentNode,checked);   
             } 
  };
 //级联选中父节点
 var parentCheck = function(node ,checked){    
  var childNodes = node.childNodes;
  for (var i = 0; i < childNodes.length; i++) {
  if (childNodes[i].get('checked')) {
  node.set('checked',checked);
  continue;
  }else{
  node.set('checked',false);
  break;
  }
  };
  var parentNode = node.parentNode;
  if (parentNode != null ) {
  parentCheck(parentNode,checked);
  }
 }
 //级联选择子节点
 var childHasChecked = function (node, checked) {
   node.cascadeBy(function (child) {
     child.set("checked",checked)
   });
}
 
分享到:
评论

相关推荐

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

    下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。 在 treepanel 里添加以下代码即可实现级联选中效果 主要实现了以下效果: 1.点击父级批量设置所有子节点选中状态 2.点击当前节点寻找所有父级并设置选中状态 3....

    Ext TreePanel Checked Ext复选框树

    4. **事件监听**:`TreePanel`提供了丰富的事件,如`checkchange`,当节点的复选框状态改变时,可以监听这个事件并执行相应的处理函数。这使得开发者能够根据用户的操作动态更新应用的状态。 5. **配置选项**:`...

    Ext TreePanelrcheckbox级联选择的实现

    总之,“Ext TreePanelrcheckbox级联选择的实现”涉及了ExtJS的TreePanel组件和复选框模型的使用,通过监听事件和自定义逻辑实现了节点间的选择级联。这种功能在具有层级结构的数据选择场景中非常常见,如权限管理、...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    Ext 树的级联选择扩展插件使用说明

    级联选择(Cascading Selection)则是指当用户选中一个节点时,其所有子节点都会自动被选中,反之,如果取消选中父节点,所有子节点也会随之被取消选中。这种功能在组织结构、文件系统或权限管理等场景下非常有用。 ...

    ExtJS4.2 tree 级联选择

    在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有子节点也会被自动选中,反之亦然,如果取消选中父节点,其所有子节点也将被取消选中。...

    ExtJS树形结构.docx

    总的来说,这段代码展示了如何在EXTJS中创建一个具有拖放、动画效果、可折叠和多级节点的树形结构,并且实现了节点选中状态的级联更新。这种树形结构常用于展示具有层次关系的数据,例如组织结构、文件系统或菜单等...

    extjs3.X 带复选框的树

    4. **事件处理**:用户点击复选框时,会触发事件,这个事件可能包含节点的新状态,以及当前选中或取消选中的节点信息。这些事件可以被其他部分的代码监听,用于执行如数据同步、业务逻辑处理等操作。 5. **数据模型...

    extjs4带checked的treegrid.rar

    7. **API使用**: ExtJS 4提供了丰富的API,如`selectNode`、`deselectNode`等,用于在代码中控制节点的选中状态。 8. **自定义行为**: 如果需要实现更复杂的复选框逻辑,如级联选择、反选等,可以通过重写或扩展...

Global site tag (gtag.js) - Google Analytics