当前位置: 代码迷 >> Web前端 >> Ext 树的级联抉择扩展插件使用说明
  详细解决方案

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

热度:84   发布时间:2012-10-27 10:42:26.0
Ext 树的级联选择扩展插件使用说明

插件文件见附件!
插件:TreeCheckNodeUI.js
作用:对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,用于树节点前面加复选框,并且实现级联选择

扩展的功能点有:
一、支持只对树的叶子进行选择
只有当返回的树结点属性leaf = true 时,结点才有checkbox可选
? 使用时,只需在声明树时,加上属性 onlyLeafCheckable: true 既可,默认是false

二、支持对树的单选
只允许选择一个结点
? 使用时,只需在声明树时,加上属性 checkModel: "single" 既可

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

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

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

使用方法:在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
例如:
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.tree.TreeCheckNodeUI } //添加 uiProvider 属性
?}),
?root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
tree.render();

温馨说明

如果要让节点默认选中,直接在后台组装数据,让数据对象的checked=true就可以了

对于树的一些操作方法
//清空所有复选框
function clearChildNodeChecked(node){
??? if(node.childNodes.length!=0){
??????? for(var i=0;i<node.childNodes.length;i++){
??????????? node.childNodes[i].getUI().checkbox.checked=false;
??????????? node.childNodes[i].attributes.checked=false;
??????????? clearChildNodeChecked(node.childNodes[i]);
??????? }
??? }
}
/**
* 取得所有子节点中checked 为true的节点
* 包括本节点
*/
function getCheckedNodes(node){
?var checked = [];
?if( node.attributes.funId=='0' || node.getUI().isChecked() || node.attributes.checked ) {
??if(node.attributes.funId!='0'){
???checked.push(node);
??}
??if( !node.isLeaf() ) {
???for(var i = 0; i < node.childNodes.length; i++ ) {
????checked = checked.concat( getCheckedNodes(node.childNodes[i]) );
???}
??}
?}
?return checked;
};

  相关解决方案