There are many ways to dynamically display and hide a column in the datagrid. In the following article, we will introduce how jQuery is implemented.
The Code is as follows:
$ (Function (){
$ ('# Tt'). datagrid ({
Title: 'report statistics ',
Width: 1020,
Height: 400,
Url :'',
FitColumns: true,
LoadMsg: 'acquiring. Please wait ...',
SingleSelect: true,
Nowrap: false,
Columns :[[
{Field: 'region _ name', title: 'Branch ', width: 30, align: 'center '},
{Field: 'county _ name', title: 'area/COUNTY ', width: 80, align: 'center', editor: 'text '},
{Field: 'area _ name', title: 'grid', width: 80, align: 'center', editor: 'text '},
{Field: 'org _ name', title: 'dot ', width: 80, align: 'center '},
{Field: 'total _ num', title: 'total business', width: 40, align: 'center '},
{Field: 'dh _ num', title: 'Single wide business', width: 40, align: 'center '},
{Field: 'rh _ num', title: 'converged business', width: 40, align: 'center '},
{Field: 'yyt _ num', title: 'Business office service', width: 40, align: 'center '},
{Field: 'qt _ num', title: 'other business', width: 40, align: 'center '}
],
Toolbar :[
],
OnDblClickRow: function (){
// Selected = $ ('# tt'). datagrid ('getselected ');
// Var index = $ ('# tt'). datagrid ('getrowindex', selected );
// $ ('# Tt'). datagrid ('ineinedit', index );
// Progress ();
// TaskPreempte (selected. taskId );
}
});
$ ('# My_toolbar'). appendTo ('. datagrid-toolbar ');
Var dd = new Date ();
Var d1 = dd. getFullYear () + "-" + (dd. getMonth () + 1) + "-1 ";
Var d2 = dd. getFullYear () + "-" + (dd. getMonth () + 1) + "-" + dd. getDate ();
$ ('# QryStartDate'). datebox ('setvalue', d1); // set datebox value
$ ('# Qryenddate'). datebox ('setvalue', d2); // set datebox value
RefreshRpt2 ();
});
Function refreshRpt2 (){
Var strStatCond = "B. region_name ";
If ($ ('# qryCon'). attr ("value ")! = 100 ){
Param. sts = $ ('# qryCon'). attr ("value ");
Alert (param. sts );
}
Param. qryBeginTime = $ ('# qrystartdate'). datebox ('getvalue ');
// Alert (param. qryBeginTime );
Param. qryEndTime = $ ('# qryenddate'). datebox ('getvalue ');
// Alert (param. qryEndTime );
If ($ ('# region ')! = Null & $ ('# region'). attr ("checked") = true ){
}
If ($ ('# county ')! = Null & $ ('# county'). attr ("checked") = true ){
StrStatCond + = ", c. county_name ";
$ ('# Tt'). datagrid ('showcolumn', 'county _ name ');
} Else {
$ ('# Tt'). datagrid ('hidecolumn', 'county _ name ');
}
If ($ ('# Region ')! = Null & $ ('# area'). attr ("checked") = true ){
StrStatCond + = ", d. area_name ";
$ ('# Tt'). datagrid ('showcolumn', 'area _ name ');
} Else {
$ ('# Tt'). datagrid ('hidecolumn', 'area _ name ');
}
If ($ ('# org ')! = Null & $ ('# org'). attr ("checked") = true ){
StrStatCond + = ", e.org _ name ";
$ ('# Tt'). datagrid ('showcolumn', 'org _ name ');
} Else {
$ ('# Tt'). datagrid ('hidecolumn', 'org _ name ');
}
Alert (strStatCond );
Param. statCond = strStatCond;
Param. rptName = "statBusiRpt ";
JSBaseCall.exe cute (param, showResult2 );
}
// Display the record set
Function showResult2 (data ){
Var strJson = data ["defaultJsonString"];
Var result = eval ('+ strJson + ')');
// Alert (strJson );
If (result. KEY_JSCALL_RESULT ){
If (result. KEY_SERVICE_RES) {// succeeded
TotalRec = result. KEY_TOTAL_REC;
Var d = {"total": pageShowRec,
"Rows": result. defaultAList
};
$ ('# Tt'). datagrid ('loaddata', d );
}
}
}
For example, when "Qu county" does not have data, the table does not need to show empty columns, but directly hides this column.