首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Ext TreePanel兑现单选等功能

2012-10-31 
Ext TreePanel实现单选等功能三、支持对树的级联多选当选择结点时,自动选择该结点下的所有子结点,或该结点

Ext TreePanel实现单选等功能

三、支持对树的级联多选
    当选择结点时,自动选择该结点下的所有子结点,或该结点的所有父结点(根结点除外),特别是支持异步,当子结点还没显示时,会从后台取得子结点,然后将其选中/取消选中
    使用时,只需在声明树时,加上属性 checkModel: "cascade" 或"parentCascade"或"childCascade"既可
    cascade :级联选中所有父结点和子结点
    parentCascade :级联选中所有父结点
    childCascade  :级联选中所有子结点

四、添加"check"事件
    该事件会在树结点的checkbox发生改变时触发
    使用时,只需给树注册事件,如:
    tree.on("check",function(node,checked){...});

默认情况下,checkModel为 'multiple',也就是多选;onlyLeafCheckable为false,所有结点都可选

使用方法:在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 既可.

例如:
Js代码

 var tree = new Ext.tree.TreePanel({       el:'tree-ct',       width:568,       height:300,       checkModel: 'cascade',   // 对树的级联多选       onlyLeafCheckable: false,//对树所有结点都可选       animate: false,       rootVisible: false,       autoScroll:true,           dwrCall:Tmplt.getTmpltTree,           baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性       }),       root: new Ext.tree.AsyncTreeNode({ id:'0' })   });   tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件   tree.render();      var tree = new Ext.tree.TreePanel({        el:'tree-ct',        width:568,        height:300,        checkModel: 'cascade',   //对树的级联多选        onlyLeafCheckable: false,//对树所有结点都可选        animate: false,        rootVisible: false,        autoScroll:true,        loader: new Ext.tree.DWRTreeLoader({            dwrCall:Tmplt.getTmpltTree,            baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性        }),        root: new Ext.tree.AsyncTreeNode({ id:'0' })    });    tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件    tree.render();


需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,

如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } 就行了
实现单选功能:this.on('checkchange',this.check,this);getNodes:function(treePanel){        var startNode = treePanel.getRootNode();        var r = [];        var f = function(){                r.push(this);        };        startNode.cascade(f);        return r;},check : function(node,bool) {        if(!bool){            return;        }if(this.checkModel=='single'){        var nodes =this.getNodes(this);        if(nodes && nodes.length>0){            for(var i=0,len=nodes.length;i<len;i++){                if(nodes[i].id!=node.id){                    if(nodes[i].getUI().checkbox){                        nodes[i].getUI().checkbox.checked = false;                                nodes[i].attributes.checked=false;                    }                }            }        }}}



http://www.iteye.com/topic/164426 1 楼 yuniannian 2010-08-03   楼主太强了,今天刚好用到这个,谢谢哦

热点排行