日期:2014-05-16  浏览次数:20421 次

ExtJs中的CheckboxSelectionModel功能的完善

所谓说要完善CheckboxSelectionModel功能,其它是实现每行的CheckBox可以触发全选或者去全选。

?

说白了,就是当我们选中表中一行时,如果所有行都已经选中,那么头部的全选框会自动化选上,而如果表格全选中,把

?

其中一行去掉选择,而头部的全选框会自动去全选。

?

代码如下:

?

Ext.override(Ext.grid.CheckboxSelectionModel,{
		    onMouseDown : function(e, t){
				if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
					e.stopEvent();
					var row = e.getTarget('.x-grid3-row');

					// mouseHandled flag check for a duplicate selection (handleMouseDown) call
					if(!this.mouseHandled && row){
						//alert(this.grid.store.getCount());
						var gridEl = this.grid.getEl();//得到表格的EL对象
						var hd = gridEl.select('div.x-grid3-hd-checker');//得到表格头部的全选CheckBox框
						var index = row.rowIndex;
						if(this.isSelected(index)){
							this.deselectRow(index);
							var isChecked = hd.hasClass('x-grid3-hd-checker-on');
							//判断头部的全选CheckBox框是否选中,如果是,则删除
							if(isChecked){
								hd.removeClass('x-grid3-hd-checker-on');
							}
						}else{
							this.selectRow(index, true);
							//判断选中当前行时,是否所有的行都已经选中,如果是,则把头部的全选CheckBox框选中
							if(gridEl.select('div.x-grid3-row-selected').elements.length==gridEl.select('div.x-grid3-row').elements.length){
								hd.addClass('x-grid3-hd-checker-on');
							};
						}
					}
				}
				this.mouseHandled = false;
    },
	onHdMouseDown : function(e, t){
		/**
		*大家觉得上面重写的代码应该已经实现了这个功能了,可是又发现下面这行也重写了
		*由原来的t.className修改为t.className.split(' ')[0]
		*为什么呢?这个是我在快速点击头部全选CheckBox时,
		*操作过程发现,有的时候x-grid3-hd-checker-on这个样式还没有删除或者多一个空格,结果导致下面这个判断不成立
		*去全选或者全选不能实现
		*/
        if(t.className.split(' ')[0] == 'x-grid3-hd-checker'){
            e.stopEvent();
            var hd = Ext.fly(t.parentNode);
            var isChecked = hd.hasClass('x-grid3-hd-checker-on');
            if(isChecked){
                hd.removeClass('x-grid3-hd-checker-on');
                this.clearSelections();
            }else{
                hd.addClass('x-grid3-hd-checker-on');
                this.selectAll();
            }
        }
    }
	});

?

?

?

1 楼 qingBYqing 2011-08-18  

牙哥   请 问你  上面这段代码   直接 加入 到 ext-all.js 后面
可以用吗?  可以完善 CheckboxSelectionModel功能 吗
2 楼 qingBYqing 2011-08-18  
谢谢