日期:2014-05-16 浏览次数:20530 次
所谓说要完善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();
}
}
}
});
?
?
?