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