Ext.js中树勾选的四种操作

最近在做控件优化的时候产品提了一个需求，对树的勾选要满足四种勾选方案：

1.点击一次根节点，当根节点和子节点均未选中的情况下，根节点和子节点全都选中。

2.第二次点击根节点，当根节点和部分或全部子节点都选中的情况下，仅选中根节点，子节点不选中。

3.第三次点击根节点，当根节点未选中，且无子节点全未选中的情况下，选中所有子节点，根节点不选中。

4.第四次点击根节点，当根节点未选中，但存在选中的子节点的情况下，根节点和子节点均不选中。

5.点击子节点，可以选中取消。

 

 

 完整代码：

操作位代码：

{
            xtype: 'actioncolumn',
            width: 48,
            text:'选择',
            align: 'center',
            stopSelection: true,
            sortable: false,
            menuDisabled: true,
            items: [{
                width: 13,
                height: 13,
              
                handler: function (view, rowIdx, colIdx, item, evt) {
                    var sto = view.getStore();
                    var rec = sto.getAt(rowIdx);
                    var check = rec.get('Checked');
                    if (isNaN(check)) check = 0;
                    if (check == -1) return;
                    me.setLoading("loading");
                    if (check == 1) {    //点击的节点是选中状态
                        check = 0;
                        me.checkNode(rec, false);
                    } else {                //点击的节点是未选中状态
                        check = 1;
                        me.checkNode(rec, true);
                    }
                    me.setLoading(false);
                }
            }]
}


核心代码：
    checkNode: function (rec, checked) {
        var me = this;
        var check = 0;
        var hasCheckedNode = false;   //是否有子节点选中
        var hasNodes = false;         //是否有子节点
        rec.cascade(function (r) {           //遍历子节点
            var len = r.get('children');
            if (len) {
                hasNodes = true;
            }
            if (!r.isLeaf() && !r.isExpanded()) {
                r.expand();
            }
            if (r.get('Checked') == 1 && !len  ) {    //节点有选中，而且选中的不是父节点本身
                hasCheckedNode = true;
            } 

        });
        if (!checked) {
            if (hasCheckedNode && hasNodes) {
                //前提：父子节点都选中；效果：父节点选中，子节点不选中。
                check = 1;

                //下级全部取消
                rec.cascade(function (r) {
                    if (r.get('Checked') !== 0)
                        r.set('Checked', 0);
                });
            } else if (!hasCheckedNode && hasNodes) {
                //前提：父节点选中，子节点未选中；效果：父节点不选中，子节点选中。
                check = 0;

                //下级全部选中
                rec.cascade(function (r) {
                    if (r.get('Checked') !== 1)
                        r.set('Checked', 1);
                });
                
            } else if (!hasCheckedNode && !hasNodes) {
                //该节点是无子节点的节点
                check = 0;
               
            }
           
        } else {
            if (hasCheckedNode && hasNodes) {
                //前提：父节点不选中，子节点选中；效果：父节点都不选中。
                check = 0;
                //下级全不选中
                rec.cascade(function (r) {
                    if (r.get('Checked') != 0) {
                        r.set('Checked', 0);
                    }

                });
            } else if (!hasCheckedNode && hasNodes) {
                //前提：父子节点不选中；效果：父子节点都选中。
                check = 1;
                //下级选中
                rec.cascade(function (r) {
                    if (r.get('Checked') != 1) {
                        r.set('Checked', 1);
                    }

                });
            } else if (!hasCheckedNode && !hasNodes) {
                //该节点是无子节点的节点
                check = 1;
               
            }
            
           
        }
        rec.set('Checked', check);
    }   
    
});

 

核心点分析：

1.首先要确定我们点击的是根节点还是子节点。所以定义了

var hasNodes = false;         //是否有子节点

2.要分别控制根节点跟子节点的话，那点击根节点的时候要查看是否有子节点选中，所以继续定义了

var hasCheckedNode = false;   //是否有子节点选中

3.再根据点击的该节点的初始状态就可以进行逻辑判断，达到效果。