Jquery Easy UI DataGrid dynamic load Column problem

Original: Jquery Easy UI DataGrid dynamic load List problem

1. If the effect is when a different date range is selected, the DataGrid will load the corresponding number of columns

2. The first is the background assembly data, I use the loop and splicing DataTable data, the following code

  　　　　　　　　　 //Loop to add the required table numbers for the DataGrid                 for(inti =0; I < table. Columns.count; i++) {columns. AppendFormat ("{{field: ' {0} ', title: ' {1} ', align: ' center ', Width:{2}}},", table. Columns[i]. ColumnName, table. Columns[i]. ColumnName, A); }                //Delete the most filed "," Number                if(table. Columns.count >0) {columns. Remove (columns. Length-1,1); } columns. Append ("]]"); //the Cheng Dacheng of the stations and the tables and the numbersdictionary<string,Object> objdic =Newdictionary<string,Object>(); Objdic.add ("Columns", Columns. ToString ()); //datagrid Table Head objdic.add ("rows", table); DataGrid Table Data
　　　　　　　　　 // convert to JSON format                  returnCommon.JsonHelper.ToJson (Objdic)

3. Obtain the assembled JSON format data returned by the browser, as follows

{"Columns":"[[{field: ' Item ', title: ' Items ', align: ' center ', Width:120},{field: ' Summonth ', title: ' March ', align: ' center ', width:70}, {field: ' 03/01 ', title: ' 03/01 ', align: ' center ', Width:41},{field: ' 03/02 ', title: ' 03/02 ', align: ' center ', width
: 41},{field: ' 03/03 ', title: ' 03/03 ', align: ' center ', Width:41},{field: ' 03/04 ', title: ' 03/04 ', align: ' center ', width : 41},{field: ' 03/05 ', title: ' 03/05 ', align: ' center ', Width:41},{field: ' 03/06 ', title: ' 03/06 ', align: ' center ', width : 41},
{field: ' 03/07 ', title: ' 03/07 ', align: ' center ', Width:41},{field: ' 03/08 ', title: ' 03/08 ', align: ' center ', width:41},{ Field: ' 03/09 ', title: ' 03/09 ', align: ' center ', Width:41},{field: ' 03/10 ', title: ' 03/10 ', align: ' center ', width:41},
{field: ' 03/11 ', title: ' 03/11 ', align: ' center ', Width:41},{field: ' 03/12 ', title: ' 03/12 ', align: ' center ', width:41},{ Field: ' 03/13 ', title: ' 03/13 ', align: ' center ', width:41}]",

"rows":[{"Serailnum":1,"Item":"the sum of all the lot's working hours (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":"Produce lot Batches","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 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. Browser-side parsing data, and binding DataGrid

//kidnapped order Cheng Dacheng the station$("#dg_PDL_RealCT"). DataGrid ({width:'Auto',//width ofHeight'Auto',//HeightSingleselect:true,//Allow to select a rowStriped:true,//set to True to display the row background alternately. Rownumbers:true,//Show LineTitle"stand in fact ct-daily report",//titleICONCLS:"Icon-save",//ChartCollapsible:true,//Hide buttonMethod"Post",//Post PleaseShowfooter:true, Loadmsg:"in the download ...",//prompt content when loading informationonloaderror:function () {$.messager.alert ('Wen Xin hint',"failed to load data!!! "); }, View:myview, emptymsg:'There are no checks to the relevant numbers! '                    }); //End DataGrid//kidnapped order Cheng Dacheng the station$.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                             varJSON = eval ("("+ Data +")");
　　　　　　　　　　　　　　　　//Get the DataGrid familiar with the object and assign it a value                             varopt = $ ("#dg_PDL_RealCT"). DataGrid ('Options');
　　　　　　　　　　　　　　　　//Assign a value to the DataGrid table header Opt.columns=eval (json.columns); $("#dg_PDL_RealCT"). DataGrid (opt);
　　　　　　　　　　　　　　　　//Load the DataGrid contents $ ("#dg_PDL_RealCT"). DataGrid ("LoadData", JSON.                            rows); $.messager.progress ('Close'); },  +);//End SetTimeout});//End Postgh

Jquery Easy UI DataGrid dynamic load Column problem