Easyui Complex Header (effect chart) && code

In this project we are using Ext+easyui (mainly to solve the problem of multiple headers), where I will only paste part of the Easyui code:

Final implementation Effect Diagram:

The following code is implemented:

Easyui version: jquery-easyui-1.2.5

Generate JSON Code JS

[JavaScript]//Convert JSON objects
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 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+ ') ');
}
Easyui Implements complex headers:

[JavaScript]//Create columns
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 header
Continentgrouprow.push (Tocoljson (key04, ' Zoning 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, ' flow to patients outside the county level ', ' center ', 6));
Continentgrouprow.push (Tocoljson (keys01, ' flow to county level ', ' center ', 2));
Continentgrouprow.push (Tocoljson (keys01, ' flow to Township ', ' center ', 2));
Continentgrouprow.push (Tocoljson (keys01, ' flow to other ', ' center ', 2));



var citygrouprow=new Array ();//Merge header

Citygrouprow.push (Tocoljson (keys01, ' Total ', ' center ', 1));
Citygrouprow.push (Tocoljson (keys01, ' Subtotal ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' The number of patients in provincial sentinel medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' The number of patients in the city-level sentinel medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' number of patients in medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' number of patients in medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' number of patients in medical institutions ', ' center ', 2));

var columns=new array ();//Column

Columns.push (Tocoljson (key02, ' (Unit: Person) ', ' 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, ' Coulvlnum ', 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 Info ',
Fit:true,
Nowrap:false,
Rownumbers:true,
Pagination:true,
Pagenumber:1,
singleselect:true,//only allow one line to be selected
SortOrder: ' Desc ',
remotesort:false,//Remote Sort ban
Striped:true,
Loadmsg: ' is loading please later. ',
PAGESIZE:20,
PAGELIST:[10,20,50,100],
Showfooter:true,
frozencolumns:[frozencolumns],//Locked Columns
Columns:[continentgrouprow,citygrouprow,columns]
});
Creating columns
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 header
Continentgrouprow.push (Tocoljson (key04, ' Zoning 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, ' flow to patients outside the county level ', ' center ', 6));
Continentgrouprow.push (Tocoljson (keys01, ' flow to county level ', ' center ', 2));
Continentgrouprow.push (Tocoljson (keys01, ' flow to Township ', ' center ', 2));
Continentgrouprow.push (Tocoljson (keys01, ' flow to other ', ' center ', 2));



var citygrouprow=new Array ();//Merge header

Citygrouprow.push (Tocoljson (keys01, ' Total ', ' center ', 1));
Citygrouprow.push (Tocoljson (keys01, ' Subtotal ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' The number of patients in provincial sentinel medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' The number of patients in the city-level sentinel medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' number of patients in medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' number of patients in medical institutions ', ' center ', 2));
Citygrouprow.push (Tocoljson (keys01, ' number of patients in medical institutions ', ' center ', 2));

var columns=new array ();//Column

Columns.push (Tocoljson (key02, ' (Unit: Person) ', ' 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, ' Coulvlnum ', 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 Info ',
Fit:true,
Nowrap:false,
Rownumbers:true,
Pagination:true,
Pagenumber:1,
singleselect:true,//only allow one line to be selected
SortOrder: ' Desc ',
remotesort:false,//Remote Sort ban
Striped:true,
Loadmsg: ' is loading please later. ',
PAGESIZE:20,
PAGELIST:[10,20,50,100],
Showfooter:true,
frozencolumns:[frozencolumns],//Locked Columns
Columns:[continentgrouprow,citygrouprow,columns]
});

The above code is the main implementation;

Excerpt from yhc13429826359 's column