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