Question about Jquery easy ui datagrid dynamic addition of dynamic columns, jquery

Question about Jquery easy ui datagrid dynamic addition of dynamic columns, jquery

1. If the effect is to select a different date range, the datagrid will load the corresponding number of Columns

 

 

2. First, assemble data in the background. I use a loop and concatenate the DataTable data. The following code:

// The number of table headers required to add the datagrid in a cycle for (int I = 0; I <table. columns. count; I ++) {columns. appendFormat ("{field: '{0}', title: '{1}', align: 'center', width: {2 }},", table. columns [I]. columnName, table. columns [I]. columnName, 41);} // except for a filed multi-variable, "partition if (table. columns. count> 0) {columns. remove (columns. length-1, 1);} columns. append ("]"); // The scheduling tasks of each site are grouped into two table headers and data Dictionary <string, object> objDic = new Dictionary <string, object> (); objDic. add ("columns", columns. toString (); // datagrid header objDic. add ("rows", table); // datagrid table data
// Convert to Json format return Common. JsonHelper. ToJson (objDic)

 

3. Obtain the assembled JSON format data returned by the browser, as shown below:

{"Columns": "[{field: 'item', title: 'category object', align: 'center', width: 120}, {field: 'summonth ', title: 'february's options', align: 'center', width: 70}, {field: '000000', title: '000000', align: 'center ', width: 41}, {field: '20140901', title: '20160901', align: 'center', width
: 41}, {field: '20140901', title: '20160901', align: 'center', width: 41}, {field: '20160901', title: '20180101', align: 'center', width: 41}, {field: '20180101', title: '20180101', align: 'center', width: 41 }, {field: '20160901', title: '20160901', align: 'center', width: 41 },
{Field: '20160301', title: '20160301', align: 'center', width: 41}, {field: '20160301', title: '20160301', align: 'center', width: 41}, {field: '20160301', title: '20160301', align: 'center', width: 41}, {field: '20160301 ', title: '2013', align: 'center', width: 41 },
{Field: '20160301', title: '20160301', align: 'center', width: 41}, {field: '20160301', title: '20160301', align: 'center', width: 41}, {field: '201312', title: '201312', align: 'center', width: 41}] ",

"Rows": [{"SerailNum": 1, "Item": "The combination of hours used by many projects (H)", "SumMonth": 142.00, "03/01": null, "03/02": null, "03/03": null, "03/04": 50.00, "03/05": null, "03/06": 7.00, "03/07 ": 42.00, "03/08": null, "03/09": null, "03/10": 17.00, "03/11": null, "03/12": 26.00, "03/13": null }, {"SerailNum": 2, "Item": "LOT production batch", "SumMonth": 13.00, "03/01": 0.00, "03/02": 0.00, "03/03 ": 0.00, "03/04": 2.00, "03/05": 0.00, "03/06": 4.00, "03/07": 2.00, "03/08": 0.00, "03/09": 0.00, "03/10": 1.00, "03/11": 0.00, "03/12": 4.00, "03/13": 0.00 },{ "SerailNum": 3, "Item ": "Average completed CT", "SumMonth": 10.92, "03/01": null, "03/02": null, "03/03": null, "03/04": 25.00, "03/05": null, "03/06": 1.75, "03/07": 21.00, "03/08": null, "03/09": null, "03/10": 17.00, "03/11 ": null, "03/12": 6.50, "03/13": null}]}

 

4. parse data on the browser side and bind the datagrid

// The schedule for each site in the dispatch order is merged into the schedule $ ("# dg_PDL_RealCT "). datagrid ({width: 'auto', // degree of parallelism height: 'auto', // height singleSelect: true, // You can select a line of striped: true, // if it is set to true, the background of the row is displayed alternately. Rownumbers: true, // displays the row title: "Site Specific Objective CT-daily summary", // subject iconCls: "icon-save ", // The Rows table collapsible: true, // The rows are stored according to the rows method: "post", // for post, please find showFooter: true, loadMsg: "adding rows in the number of rows... ", // when loading information, the message" Internal onLoadError: function () {$. messager. alert ('xin Xin hint ', "loading data failed !!! ") ;}, View: myview, emptyMsg: 'No correlation data found! '}); // End datagrid // The scheduling orders for each site are converted into two table headers $. post ("/PI/PDL_RealCT", {"BDate": $ ("# BDate "). datebox ('getvalue'), "EDate": $ ("# EDate "). datebox ('getvalue'), "ProcCode": $ ("# ProcCode "). combobox ('getvalue')}, function (data) {setTimeout (function (){
// Convert json format data to js object var json = eval ("(" + data + ")");
// Obtain the familiar object of the datagrid and assign it var opt = $ ("# dg_PDL_RealCT"). datagrid ('options ');
// Assign opt. columns = eval (json. columns); $ ("# dg_PDL_RealCT"). datagrid (opt) to the datagrid header );
// Load the datagrid content $ ("# dg_PDL_RealCT "). datagrid ("loadData", json. rows); $. messager. progress ('close') ;}, 1000); // end setTimeout}); // end postgh