`

Ext树级联选中父节点和子节点

阅读更多

var treePanel = new Ext.tree.TreePanel({

        border:true, 
              autoScroll:true,
              animate:true,
              autoWidth:true,        
              enableDD:true,
              width:280,
              height:300, 
              containerScroll: true,
              loader: new Ext.tree.TreeLoader({
                      dataUrl:'../contCondition.do?action=getMatTree'
              })

    });

    var root = new Ext.tree.AsyncTreeNode({

            text: '物料类别',                  //节点名称
                   checked:false,
                   draggable:false,                  //是否支持拖动
                   id:'0'                      //节点id
          });

   treePanel.setRootNode(root);

 //判断是否有子结点被选中
         var childHasChecked = function(node)
        {
              var childNodes = node.childNodes;

        if(childNodes || childNodes.length>0){

        for(var i=0;i<childNodes.length;i++){

            if(childNodes[i].getUI().checkbox.checked)

                return true;

            }
              }
             return false;
         }

    //级联选中父节点
          var parentCheck = function(node ,checked){

        var checkbox = node.getUI().checkbox;

        if(typeof checkbox == 'undefined')

            return false;

        if(!(checked ^ checkbox.checked))

            return false;

        if(!checked && childHasChecked(node))

            return false;

        checkbox.checked = checked;
               node.attributes.checked = checked;
               node.getUI().checkbox.indeterminate = checked; //半选中状态

        node.getOwnerTree().fireEvent('check', node, checked);

        var parentNode = node.parentNode;

        if( parentNode !== null){

            parentCheck(parentNode,checked);

        }

    }

//增加checkchange监听

   treePanel.on('checkchange', function(node, checked) {

            var parentNode = node.parentNode;

            if(parentNode !== null) {   
                        parentCheck(parentNode,checked);   
                   }

           node.expand();

           node.attributes.checked = checked;     

           node.eachChild(function(child) 
                 {     

                  child.ui.toggleCheck(checked);    
                         child.attributes.checked = checked;     
                         child.fireEvent('checkchange', child, checked);

           });     

    }, treePanel);

 

    //获取新增复选框树的值
         function onItemClick(){

        var checkedNodes = treePanel.getChecked();//tree必须事先创建好.这里要标识识获取那个treepanel的 id

        var checkedIds = [];

        for(var i=0;i<checkedNodes.length;i++)
               {

                 if( checkedNodes[i].hasChildNodes())
                         {
                                //这里只是获取节点为子节点的id ,如果不需要可以删除。
                         }
                          else
                          {
                                checkedIds.push(checkedNodes[i].id);
                           }          

        }
                        return checkedIds.join(',');

    }; 

    方法二:最近在一个项目中用到了EXT中TREE,但是它本身不提供自己想要的功能,在一番搜索之后,找到了《 Ext.tree.TreeNodeUI 进行checkbox功能的扩展》这个文章,在看过以后,发现了几个问题

1、只有两种状态

2、当选中子节点的时候,它又把自己的父节点给循环了一边 

于是自己就做了如下修改,这里只贴修改后的,如果有人想比较,可以找找那篇文章

  // private
        childCheck : function(node,checked)
       {
                 var a = node.attributes;
                if(!a.leaf)
               {
                    var cs = node.childNodes;
                    var csui;
                   for(var i = 0; i < cs.length; i++) 
                   {
                         csui = cs[i].getUI();
                         csui.checkbox.checked=checked;
                         this.childCheck(cs[i],checked);
                 }
              }
        },
 
 // private
 parentCheck : function(node ,checked)
{
         var checkbox = node.getUI().checkbox;
         if(typeof checkbox == 'undefined')return ;
         var state=this.childHasChecked(node,checked); 
  
        //if(!(checked ^ checkbox.checked))return;  
         //if(!checked && childhaschecked) return;
         if (state==0)//全否
         {
                 checkbox.checked=false;
                 checkbox.indeterminate=false;
         } 
       else   if (state==1) //半选中
        {
                 checkbox.checked=true;
                 checkbox.indeterminate=true;
         } 
       else
         {
                 checkbox.checked=true;
                 checkbox.indeterminate=false;
         }
        // checkbox.checked = checked;  
         node.attributes.checked = checkbox.checked;
         node.getOwnerTree().fireEvent('check', node, checked);
  
         var parentNode = node.parentNode;
         if( parentNode !== null)
        {
                 this.parentCheck(parentNode,checked);
         }
    },
 
   // 检查是否存在被勾选的 并且状态不为灰化的
 childHasChecked : function(node,checked)
{
         var childNodes = node.childNodes;
          var retValue=0;
          if(childNodes || childNodes.length>0)
        {
                 for(var i=0;i<childNodes.length;i++)
                {
                    var checkbox=childNodes[i].getUI().checkbox;
            // 本身是全选中状态  即 checked=true,  indeterminate=false  , 并且此次进来取消选中状态(参数checked=false) 则只需要找出子节点是否存在被选中如果存在某个子节点为半选中状态,则为半选中,否则不选中
                    if(!checked)  
                   {
                             if (checkbox.checked )  //存在选中 则直接退出
                             {
                                      return 1;//半选中状态
                             }
                  } 
                  else 
                {
                            retValue=2;
                             if (!checkbox.checked || (checkbox.checked && checkbox.indeterminate))
                             {
                                       return 1;
                             }
                 }
     
           }
  }
  return retValue;
 },

分享到:
评论

相关推荐

    Ext TreePanelrcheckbox级联选择的实现

    在实际应用中,我们经常需要处理树形结构的复选框,实现级联选择功能,即当父节点被选中时,其所有子节点自动被选中,反之亦然。这篇博客“Ext TreePanelrcheckbox级联选择的实现”就专注于探讨这个主题。 首先,...

    纯JS+HTML写的checkBox Tree 级联选中 好用无BUG

    - 级联选中/取消选中:在事件处理函数中,根据当前选中状态,递归遍历子节点或父节点,改变他们的选中状态。 3. **级联逻辑**: - 当父节点被选中时,所有子节点自动被选中。这可以通过遍历子节点并设置它们的`...

    带复选框的多级目录树,复选框的选择控制子节点父节点 全选和反选

    如果一个父节点的所有子节点都已被选中,那么父节点也应该被选中;反之,如果所有子节点都被取消选中,父节点也应该取消选中。这种机制可以通过遍历子节点并计算选中状态的计数来实现。 5. **实现方法**: 在...

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

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

    ext 级联选择的树形控件

    1. **树形结构**:每个节点可以有子节点,形成一个多级的树状视图,用户可以通过展开和折叠节点来查看和操作层级数据。 2. **复选框(check)**:在每个节点上添加复选框,用户可以通过勾选或取消勾选来选择或取消...

    TreeControl复选框:选中某个节点的复选框后,自动选中子节点的复选框

    6. **回溯处理**:当反向操作,即取消选中父节点时,也需要进行类似的逻辑,只是方向相反,从父节点开始取消选中所有子节点。 7. **同步UI**:最后,确保在修改了子节点状态后,更新UI以反映这些变化,保持用户界面...

    梅花雪树形菜单2.0带复选框,动态加载,级联选中(CSDN树)

    3. **级联选中**:级联选中是指当一个父节点被选中时,其所有子节点自动被选中;反之,如果一个父节点被取消选中,其所有子节点也会被取消选中。这种设计简化了用户操作,同时也方便了后台处理相关逻辑,如批量操作...

    Ext combo 下拉框级联

    例如,它可能有一个名为`getAreasByParentId`的方法,接收父区域ID作为参数,返回子区域列表,这正是级联下拉框所需的。 总结来说,"Ext combo 下拉框级联"涉及了Ext JS的Combobox组件、事件监听、数据模型、服务端...

    checktreepanel node级联选中,支持半选

    文件"checktreenode.json"可能包含CheckTreePanel的节点数据,如节点ID、文本、父节点ID、是否被选中、是否可选等属性,这些数据用于构建和渲染树结构。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    Ext级联菜单实例

    阅读《Ext级联菜单.docx》文档可能会提供更多关于如何配置和定制ExtJS级联菜单的细节,包括但不限于样式调整、动态加载子菜单、自定义事件处理等。对于初学者来说,理解和掌握这些基本概念是至关重要的,因为它们将...

    .net TreeView节点级联选择

    - 获取选中节点的父节点和子节点列表。 - 遍历子节点,设置所有子节点的`Selected`属性。 - 检查同级节点,根据其选中状态决定父节点的`Selected`属性。 四、优化与注意事项 1. 性能优化:由于可能涉及到大量的...

    ExtJs4.1.1a 异步树&级联选择

    说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!

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

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

    Ext TreePanel Checked Ext复选框树

    2. **父节点与子节点的联动**:描述中提到的“选中父节点,自动选中子节点;选中子节点,自动遍历选中父节点”是复选框树的一个重要特性。这被称为“级联选中”或“全选/全不选”模式。当父节点被选中时,其所有子...

    解决Jstree 选中父节点时被禁用的子节点也会选中的问题

    通过上述两种方法,可以有效解决在使用Jstree时遇到的父节点选中导致禁用子节点也被选中的问题。这对于提升用户界面的友好性以及避免不必要的逻辑错误非常有帮助。开发者在应用这些解决方案时,应确保测试所有的用例...

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

    这种级联选中功能在很多场景下都非常有用,比如在设置权限时,选择或取消选择某个父节点将自动选择或取消选择其所有子节点,大大提高了用户的操作效率。 需要注意的是,实例代码的介绍以及功能的实现都需要依赖于...

    ExtJS4.2 tree 级联选择

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

    JSP Ext spring级联分页程序.rar

    JSP Ext spring级联分页程序,JSP分页程序示例,结合漂亮的extjs框架实现。由于空间问题web-inf/lib里的jar文件未引入,本项目是在struts2 hibernate spring构架下的,所以需要引入这些jar包。

    基于Bootstrap的级联选择树

    例如,当用户选择一个父节点时,所有子节点的状态可能会自动更改,或者只显示与所选父节点相关的子节点。这种级联效果可以通过遍历树结构,修改节点的属性并重新渲染视图来实现。 级联选择树的关键在于理解和处理树...

    C# treeview 级联选择

    在这段代码中,我们增加了更新父节点选中状态的部分。具体来说,当某个节点被选中或取消选中时,我们首先更新所有子节点的状态,然后递归向上检查每个父节点的所有子节点的状态是否一致,并据此更新父节点的选中状态...

Global site tag (gtag.js) - Google Analytics