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();
实现单选功能: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; } } } }}}