EasyUI complex header (rendering) & amp; Code

In this project, we use Ext + EasyUI (mainly to solve the problem of multiple headers). Here I only paste some EasyUI code:

Final Implementation:

 

The following is the implementation code:

EasyUI version: jquery-easyui-1.2.5

// Generate JSON code js

[Javascript] // converts a Json object
Function toColJson (){
Var jsonText = '{';
JsonArray = arguments [0];
Var digit = 1;
For (var I = 0; I <jsonArray. length; I ++ ){
If (typeof arguments [I + digit]) = 'string ')
JsonText + = jsonArray [I] + ': "' + arguments [I + digit] + '"';
Else if (typeof arguments [I + digit]) = 'function ')
JsonText + = jsonArray [I] + ':' + arguments [I + digit] + '';
Else
JsonText + = jsonArray [I] + ': "' + arguments [I + digit] + '"';
If (I! = JsonArray. length-1 ){
JsonText + = ',';
}
}
JsonText + = '}';
// Alert (jsonText );
Return eval ('+ jsonText + ')');
}
// Convert the Json object
Function toColJson (){
Var jsonText = '{';
JsonArray = arguments [0];
Var digit = 1;
For (var I = 0; I <jsonArray. length; I ++ ){
If (typeof arguments [I + digit]) = 'string ')
JsonText + = jsonArray [I] + ': "' + arguments [I + digit] + '"';
Else if (typeof arguments [I + digit]) = 'function ')
JsonText + = jsonArray [I] + ':' + arguments [I + digit] + '';
Else
JsonText + = jsonArray [I] + ': "' + arguments [I + digit] + '"';
If (I! = JsonArray. length-1 ){
JsonText + = ',';
}
}
JsonText + = '}';
// Alert (jsonText );
Return eval ('+ jsonText + ')');
}
EasyUI implements complex headers:

[Javascript] // create a column
Var keys01 = ['title', 'align ', 'colspan'];
Var keys03 = ['title', 'align ', 'colspan', 'rowspan '];
Var key02 = ['title', 'align ', 'colspan', 'field', 'width', 'sortable'];
Var key04 = ['title', 'align ', 'colspan', 'rowspan ', 'field', 'width', 'sortable'];
Var continentGroupRow = new Array (); // merge the header
ContinentGroupRow. push (toColJson (key04, 'area name', 'left', 1, 3, 'areaname', 100, true ));
ContinentGroupRow. push (toColJson (key04, 'time', 'left', 1, 3, 'datetime', 80, true ));
 

ContinentGroupRow. push (toColJson (keys03, 'Total', 'center', 1, 2 ));

ContinentGroupRow. push (toColJson (keys01, 'traffic to patients outside the county level', 'center', 6 ));
ContinentGroupRow. push (toColJson (keys01, 'Streaming to county', 'center', 2 ));
ContinentGroupRow. push (toColJson (keys01, ' ', 'center', 2 ));
ContinentGroupRow. push (toColJson (keys01, 'Streaming to others', 'center', 2 ));



Var cityGroupRow = new Array (); // merge the header

// CityGroupRow. push (toColJson (keys01, 'Total', 'center', 1 ));
CityGroupRow. push (toColJson (keys01, 'subtotal ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients who are going to designated provincial Medical Institutions ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in municipal designated medical institutions ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in a medical institution ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in a medical institution ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in a medical institution ', 'center', 2 ));

Var columns = new Array (); // Column

Columns. push (toColJson (key02, '(Unit: Persons)', 'right', 1, 'totalnum', 80, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'outcoulvlsumnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p0', 60, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'prolvlnum', 85, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p1', 85, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'citylvlnum', 85, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p2', 85, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'coolnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p3', 60, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'vicuslvlnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p4', 60, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'elselvlnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p5', 60, true ));


$ ('# Grid'). datagrid ({
Url: '', // basePath + '/himp/tdata_finance_exp_and_rec_org_sta! AjaxList. action ',
// Title: 'table information ',
Fit: true,
Nowrap: false,
Rownumbers: true,
Pagination: true,
PageNumber: 1,
SingleSelect: true, // only one row can be selected
SortOrder: 'desc ',
RemoteSort: false, // remote sorting disabled
Striped: true,
LoadMsg: 'loading. Please wait! ',
PageSize: 20,
PageList: [10,20, 50,100],
ShowFooter: true,
// FrozenColumns: [frozenColumns], // locked Column
Columns: [continentGroupRow, cityGroupRow, columns]
});
// Create a column
Var keys01 = ['title', 'align ', 'colspan'];
Var keys03 = ['title', 'align ', 'colspan', 'rowspan '];
Var key02 = ['title', 'align ', 'colspan', 'field', 'width', 'sortable'];
Var key04 = ['title', 'align ', 'colspan', 'rowspan ', 'field', 'width', 'sortable'];
Var continentGroupRow = new Array (); // merge the header
ContinentGroupRow. push (toColJson (key04, 'area name', 'left', 1, 3, 'areaname', 100, true ));
ContinentGroupRow. push (toColJson (key04, 'time', 'left', 1, 3, 'datetime', 80, true ));

ContinentGroupRow. push (toColJson (keys03, 'Total', 'center', 1, 2 ));

ContinentGroupRow. push (toColJson (keys01, 'traffic to patients outside the county level', 'center', 6 ));
ContinentGroupRow. push (toColJson (keys01, 'Streaming to county', 'center', 2 ));
ContinentGroupRow. push (toColJson (keys01, ' ', 'center', 2 ));
ContinentGroupRow. push (toColJson (keys01, 'Streaming to others', 'center', 2 ));



Var cityGroupRow = new Array (); // merge the header

// CityGroupRow. push (toColJson (keys01, 'Total', 'center', 1 ));
CityGroupRow. push (toColJson (keys01, 'subtotal ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients who are going to designated provincial Medical Institutions ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in municipal designated medical institutions ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in a medical institution ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in a medical institution ', 'center', 2 ));
CityGroupRow. push (toColJson (keys01, 'number of patients in a medical institution ', 'center', 2 ));

Var columns = new Array (); // Column
 
Columns. push (toColJson (key02, '(Unit: Persons)', 'right', 1, 'totalnum', 80, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'outcoulvlsumnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p0', 60, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'prolvlnum', 85, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p1', 85, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'citylvlnum', 85, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p2', 85, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'coolnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p3', 60, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'vicuslvlnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p4', 60, true ));
Columns. push (toColJson (key02, 'number', 'right', 1, 'elselvlnum', 60, true ));
Columns. push (toColJson (key02, 'ratio ', 'right', 1, 'p5', 60, true ));


$ ('# Grid'). datagrid ({
Url: '', // basePath + '/himp/tdata_finance_exp_and_rec_org_sta! AjaxList. action ',
// Title: 'table information ',
Fit: true,
Nowrap: false,
Rownumbers: true,
Pagination: true,
PageNumber: 1,
SingleSelect: true, // only one row can be selected
SortOrder: 'desc ',
RemoteSort: false, // remote sorting disabled
Striped: true,
LoadMsg: 'loading. Please wait! ',
PageSize: 20,
PageList: [10,20, 50,100],
ShowFooter: true,
// FrozenColumns: [frozenColumns], // locked Column
Columns: [continentGroupRow, cityGroupRow, columns]
});

The above code is the main implementation;

 

 

From yhc13429826359