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();
            }
        }
    }
	});

 

 

 

评论

6 楼 moment52 2013-01-29  

lyndon.lin 写道

moment52 写道

如果我想去除那个全选按钮怎么去除呢

new Ext.grid.CheckboxSelectionModel({header :''})把header设置为空字符串即可

可以详细点吗，我用的是ext4

Ext.grid.CheckboxSelectionModel变成了Ext.Selection.CheckboxModel，然后我看API中根本就没你说的header这个config，还有我按你这样写了都没效果，
我是在grid中的selModel：new Ext.Selection.CheckboxModel({header:""});
这样根本不行

5 楼 lyndon.lin 2013-01-28  

moment52 写道

如果我想去除那个全选按钮怎么去除呢

new Ext.grid.CheckboxSelectionModel({header :''})把header设置为空字符串即可

4 楼 lyndon.lin 2013-01-28  

new Ext.grid.CheckboxSelectionModel({header :''})把header设置为空字符串即可

3 楼 moment52 2013-01-28  

如果我想去除那个全选按钮怎么去除呢

2 楼 qingBYqing 2011-08-18  

谢谢 

1 楼 qingBYqing 2011-08-18  

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