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

Ext 树级联选中子节点

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级联选择的实现”就专注于探讨这个主题。 首先,...

    ext 级联选择的树形控件

    在实际应用中,它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性: 1. **树形结构**:每个节点可以有子节点,形成一个多级的树状视图,用户可以通过展开和折叠节点来...

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

    总结来说,"Ext 树的级联选择扩展插件使用说明"涉及到的是在Ext JS环境中,如何利用自定义的`TreeCheckNodeUI.js`插件实现树形控件的级联选择功能。通过理解并运用上述步骤,开发者可以创建出交互性强、用户体验良好...

    Ext combo 下拉框级联

    标题中的"Ext combo 下拉框级联"指的是在Ext JS框架中使用Combobox组件创建级联下拉框的功能。Ext JS是一个强大的JavaScript UI库,提供了丰富的组件模型和数据绑定机制,用于构建复杂的Web应用程序。 首先,我们...

    C# treeview复选框选中 父节点选中 相应的子节点也被选中

    C# treeview复选框选中问题 父节点选中 相应的子节点也被选中 父节点不选中 子节点全部不选中;子节点全部选中 父节点也被选中

    Ext TreePanel Checked Ext复选框树

    3. **TreeNode对象**:在`Ext JS`中,每个树节点都是一个`TreeNode`对象,它包含了节点的所有属性,如文本、图标、子节点等。对于复选框树,`TreeNode`还包含了复选框的状态信息。 4. **事件监听**:`TreePanel`...

    Ext级联菜单实例

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

    JSP Ext spring级联分页程序.rar

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

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

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

    考虑级联失效的有向WSNs节点重要度评估模型.pdf

    本文提出的“考虑级联失效的有向WSNs节点重要度评估模型”针对的是网络中关键节点失效可能导致整个网络快速崩溃的挑战。在WSNs中,节点之间的交互不仅存在,而且这种交互往往是具有方向性的,即一个节点可能对另一个...

    基于Bootstrap的级联选择树

    这种级联效果可以通过遍历树结构,修改节点的属性并重新渲染视图来实现。 级联选择树的关键在于理解和处理树形数据结构。在JavaScript中,这通常表示为一个嵌套的对象或数组。每个节点包含其ID、文本、子节点等属性...

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

    在IT领域,尤其是在前端开发中,构建用户界面时经常需要处理多级目录树结构,并且在这样的...在实现时,我们需要关注复选框的状态管理、多级目录树的数据结构以及父子节点间的联动逻辑,确保用户界面的交互性与功能性。

    ExtJS4.2 tree 级联选择

    2. 加载数据源,可能使用了`check-nodes.json`这个JSON文件,该文件可能包含树节点的数据结构,如ID、文本、子节点等。加载数据的方法可能是: ```javascript store.load({ url: 'check-nodes.json' }); ``` 3...

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

    - 为了保持代码清晰,可以将相关的功能封装成独立的函数,如`createTree`用于构建树,`toggleChildren`用于级联选中/取消选中子节点。 - 如果项目规模较大,考虑使用模块化技术如ES6的`import`和`export`,或者...

    级联树形菜单

    级联树形菜单则意味着当一个节点被选中或展开时,其子节点会自动显示出来。 二、Java实现树形菜单的关键组件 1. 数据模型:首先,我们需要定义一个数据模型来表示树形结构中的节点。这个模型通常包含节点的标识(如...

    js树状地区三级级联带复选框

    例如,使用Vue.js,你可以创建一个`v-for`循环来渲染树形结构,每个节点都是一个包含复选框的组件,组件的状态可以通过`v-model`与Vue实例的数据进行双向绑定。 如果压缩包中的文件名为“jstree”,那么很可能使用...

Global site tag (gtag.js) - Google Analytics