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);
};
Calculate a selection column
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> ';
}
});
}
This is the implementation of the Ext grid single write checkbox, which shows the efficiency of several cases
2. Two kinds of implementation of the GridView
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; }
}
Plus ext's grid with a selection box of four options, ext mode of efficiency is the lowest, showing more than 500 records to select the longest time, need more than 2 minutes, to complete, modified as the first scheme, 1000 data when more than 12 seconds, in the two methods of the GridView, A The use of at least 1000 5 seconds to complete, b slightly slower, 6-7 seconds to complete, the above is the test results, the environment is different, the effect is different, this is only my personal test results, for your reference
