ExtJS 4.2 创建带复选框的树,并且有全选反选功能

来源:互联网 发布:获取windows 7密钥 编辑:程序博客网 时间:2024/05/18 02:23

var store = Ext.create(‘Ext.data.TreeStore,{//注意:store的数据后台返回时需要加 checked:false 属性;
    fields:['text','id'],
    root: {
        id:'root',
        expanded: true,
        "checked": false,
        text:''

    },
    proxy: {
        type: 'ajax',
        url: url,
       
    },
 
    autoLoad: false

})
Ext.create('Ext.tree.Panel',{

   xtype:'treepanel',//这里如果用treepicker的话,就监听不到checkChange方法

    width:300,

    height:300,

    name:'tree',

    store:store,

    listeners:{

        'checkChange':function(node,checked){//用此方法监听

             childChecked(node,checked)

             parentChecked(node,checked);

        }

    }

})


//反选
function parentChecked(node, checked, opts){
 
    var upNode = node.parentNode;
    if(upNode != null){
        var opts = {};
        opts["isPassive"] = true;
       
        var upChecked = upNode.data.checked;

        //选中状态,遍历父节点,判断有父节点下的子节点是否都全选
        if(checked){
            var allChecked = true;
          
            upNode.eachChild(function (child) {
                if(!child.data.checked){
                    allChecked = false;

                    return false;
                }
            });

            upNode.set('checked', allChecked);//updateInfo()有看到这个方法,但在这不行
            if(allChecked){
                travelParentChecked(upNode, allChecked, opts);
            }else{
                //travelParentChecked(upNode, allChecked, opts);
            }
        }else{
            if(upNode.data.checked){
                upNode.set('checked', checked);
                travelParentChecked(upNode, checked, opts);
            }else{
                //travelParentChecked(upNode, allChecked, opts);
            }
        }
    }
}
//全选
function childChecked(node,checked){
 
    checked?node.expand():node.collapse();
    if(node.hasChildNodes()){
        node.eachChild(function(n) {
            
         
            n.set('checked', checked)
            //n.updateInfo({checked:checked});
            if(n.hasChildNodes()){
                n.expand();
                allChild(n,checked);
            }
        });
    }
}

效果:


原创粉丝点击