asp.net gridview之用checkbox全選的代碼實(shí)現(xiàn)

2024-07-10 12:53:34

字體：大中小

供稿：網(wǎng)友

ASP.NET Gridview checkbox會選擇全部代碼或者不選擇代碼，原則是使用JS來實(shí)現(xiàn)，但需要一個(gè)簡單的設(shè)置來返回，下面是錯(cuò)新技術(shù)頻道小編整理的asp.net gridview之用checkbox全選的代碼實(shí)現(xiàn)，一起來學(xué)習(xí)一下吧！

1、ext的grid
Ext.grid.CheckboxColumn = function(config){
config.id = config.id || 'ck';
config.columnId = config.id || 'ck';
return Ext.applyIf(config||{},{
init:function(grid){
grid.on('cellclick', this.onCellClick, this);
grid.on('headerclick',this.onHeaderClick,this);
}
,dataIndex:''
,header:'<div class="x-grid3-check-col"></div>'
,enableHeaderControl:true
,masterValue:false
,width:40
,align:'center'
,fixed:true
,headerUnchecked:'<div class="x-grid3-check-col"></div>'
,headerChecked:'<div class="x-grid3-check-col x-grid3-check-col-on"></div>'
,onHeaderClick:function(grid,columnIndex,event){
var cIndex = grid.getColumnModel().getIndexById(this.columnId);
var column = grid.getColumnModel().getColumnById(this.columnId);
if(cIndex == columnIndex && this.enableHeaderControl!==false){
var newValue = (typeof column.masterValue == "undefined")?this.masterValue:!column.masterValue;
column.masterValue = newValue;
var newHeader = newValue==true?this.headerChecked:this.headerUnchecked;
if(column.header != newHeader){
column.header = newValue==true?this.headerChecked:this.headerUnchecked;
grid.getColumnModel().fireEvent("headerchange",cIndex,newHeader);
}
grid.getView().updateHeaders();
if(this.dataIndex != ''){
var ct = grid.getStore().getCount();
for(var i=0;i<ct;i++){
this.toggleCheck(grid,i,columnIndex,newValue);
}
}
}
}
,onCellClick:function(grid,rowIndex,columnIndex,event){
var cIndex = grid.getColumnModel().getIndexById(this.columnId);
if(cIndex == columnIndex) this.toggleCheck(grid,rowIndex,columnIndex);
}
,toggleCheck:function(grid,rowIndex,columnIndex,newValue){
var td = grid.getView().getCell(rowIndex,columnIndex);
var record = grid.getStore().getAt(rowIndex);
var startValue = record.data[this.dataIndex];
if(this.dataIndex != ''){
var newValue = newValue||!Ext.fly(td).hasClass('x-grid3-check-col-on');
var e = {
grid: grid,
record: record,
field: this.dataIndex,
value: newValue,
originalValue: startValue,
row: rowIndex,
column: columnIndex,
cancel: false
};
if( (grid.fireEvent("beforeedit",e)!==false && !e.cancel)&&
(grid.fireEvent("validateedit",e)!==false && !e.cancel)){
record.set(this.dataIndex,newValue);
delete e.cancel;
grid.fireEvent("afteredit",e);
};
//計(jì)算選擇列
//SetTransportWAndB()
//SetTransportInfo(grid);
}
}
,renderer:function(value,meta,record){
meta.css = 'x-grid3-check-col-td x-grid3-check-col';
if(value==true || value=='true' || value=='on' || value==1 || value=='1'|| value=="True"|| value=="true") meta.css += ' x-grid3-check-col-on';
return '<div class="x-grid3-check-col-inner"> </div>';
}
});
}
這是ext的grid單寫checkbox框的實(shí)現(xiàn)，后面說明幾種情況的效率
2、gridview的兩種實(shí)現(xiàn)
a、
function CA1(){
var frm=document.Form1;
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ((e.name!='Checkbox2') && (e.type=='checkbox'))
{
e.checked=frm.Checkbox2.checked;
if (frm.Checkbox2.checked)
{
hL(e);
}//endif
else
{
dL(e);
}//endelse
}//endif
}//endfor
}
b、
function selectAll(oCheckbox)
{
for(i=1;i<document.all.GridViewGoodsInfo.rows.length;i++)
{
//document.all.GridView1.rows(i).cell(0).children(0).checked=oCheckbox.checked;
GridViewGoodsInfo.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked; }
}
加上ext的grid自帶選擇框的四種方案中，ext自帶方式效率最低，顯示500多條記錄全選需要時(shí)間最長，需要2分鐘多鐘，才能完成，修改為第一種方案后，1000條數(shù)據(jù)用時(shí)12秒多，在gridview的兩種方法里，a的用時(shí)最少1000條5秒鐘完成，b的稍慢些，6－7秒完成，以上是測試結(jié)果，環(huán)境不同，效果也不同。