Ext.Tree扩展CheckBox方法

/** 
* @class Ext.tree.TreeCheckNodeUI 
* @extends Ext.tree.TreeNodeUI 
* 
* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性 
* 
* 扩展的功能点有: 
* 一、支持只对树的叶子进行选择 
* 只有当返回的树结点属性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(); 
* 
*/ 

Ext.tree.TreeCheckNodeUI = function() { 
//'multiple':多选; 'single':单选; 'cascade':级联多选 
this.checkModel = 'multiple'; 

//only leaf can checked 
this.onlyLeafCheckable = false; 

Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments); 
}; 

Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, { 

renderElements : function(n, a, targetNode, bulkRender){ 
var tree = n.getOwnerTree(); 
this.checkModel = tree.checkModel || this.checkModel; 
this.onlyLeafCheckable = tree.onlyLeafCheckable || false; 

// add some indent caching, this helps performance when rendering a large tree 
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : ''; 

var cb = (!this.onlyLeafCheckable || a.leaf); 
var href = a.href ? a.href : Ext.isGecko ? "" : "#"; 
var buf = ['
  • ', ' ',this.indentMarkup,"", ' ', ' ', cb ? (' ' : '/>')) : '', '
    ", ' ', ""].join(''); var nel; if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){ this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf); }else{ this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf); } this.elNode = this.wrap.childNodes[0]; this.ctNode = this.wrap.childNodes[1]; var cs = this.elNode.childNodes; this.indentNode = cs[0]; this.ecNode = cs[1]; this.iconNode = cs[2]; var index = 3; if(cb){ this.checkbox = cs[3]; Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null])); index++; } this.anchor = cs[index]; this.textNode = cs[index].firstChild; }, // private check : function(checked){ var n = this.node; var tree = n.getOwnerTree(); this.checkModel = tree.checkModel || this.checkModel; if( checked === null ) { checked = this.checkbox.checked; } else { this.checkbox.checked = checked; } n.attributes.checked = checked; tree.fireEvent('check', n, checked); if(!this.onlyLeafCheckable && this.checkModel == 'cascade'){ var parentNode = n.parentNode; if(parentNode !== null) { this.parentCheck(parentNode,checked); } if( !n.expanded && !n.childrenRendered ) { n.expand(false,false,this.childCheck); } else { this.childCheck(n); } }else if(this.checkModel == 'single'){ var checkedNodes = tree.getChecked(); for(var i=0;i0){ for(var i=0;i
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值