Asp.net mvc jqgrid queries different tables on the same page. jqgrid displays the headers and data of different tables on different pages. mvcjqgrid
Based on my previous article <a href = "http://www.cnblogs.com/alasai/p/4765756.html"> asp.net mvc excel import </a> in different departments to upload different excel file types, what should I do when querying on the same page.
Solution: load all the data to the table at one time based on the passed table name and time parameter. The header must be determined one by one, and the sequence of the subject must be the same as that of the header, load to the front-end and use the table paging Control for paging. I have more than 100 excel file types here, and they do not have column names. This is not an actual practice.
Is there any other solution? I have read a lot of jqgrid examples. Their header (colNames) and content (colModel) are both fixed first. Here I think of a solution that will make both colNames and colModel survive, so that we can solve the above problems perfectly,
The idea is always good, but it is not smooth, but only if you have such an idea.
Thoughts and ideas:
1. the colNames and colModel of jqgrid survive, but the colNames of each table are different, and their order must be consistent. What should we do, in the <a href = "http://www.cnblogs.com/alasai/p/4765756.html"> asp.net mvc excel import </a> Article, after a file is uploaded successfully, both colNames and colModel are saved in txt file. The code snippet is as follows:
Therefore, displaying the colNames and colModel of each table is not a problem.
The c # code in the background is as follows:
[HttpPost] public ActionResult GetTestData(string department, string tablename, string StartTime, string EndTime) { Stopwatch watch = CommonHelper.TimerStart(); string sql5 = "SELECT * FROM " + department + "_" + tablename + " where 1=1 and enabled='1' "; if (!string.IsNullOrEmpty(StartTime)) { sql5 += " and convert(varchar(10),addtime,120)>='" + StartTime + "' "; } if (!string.IsNullOrEmpty(EndTime)) { sql5 += " and convert(varchar(10),addtime,120)<='" + EndTime + "' "; } DataTable ListData = DataFactory.Database().FindTableBySql(sql5); this.dirCSV = Server.MapPath("~/Content/uploads/"); StreamReader sr = new StreamReader(this.dirCSV + "\\" + department + "_" + tablename + ".txt"); String line; List<string> list = new List<string>(); while ((line = sr.ReadLine()) != null) { list.Add(line.ToString()); } string colnames = ""; string[] chinesname = list[0].ToString().Trim(',').Split(','); string[] englishname = list[1].ToString().Trim(',').Split(','); for (int i = 0; i < chinesname.Length; i++) { colnames += "'" + chinesname[i].ToString() + "',"; } List<Department> list1 = new List<Department>(); for (int j = 0; j < englishname.Length; j++) { list1.Add(new Department { index = englishname[j].ToString().ToLower(), lable = chinesname[j].ToString(), name = englishname[j].ToString().ToLower(), sortable = "false" }); } var result = new { Json = new { colNames = chinesname, colModels = (from dept in list1 select new { index = dept.index, lable = dept.lable, name = dept.name, sortable = false }), data = new { options = new { page = "1", total = "1", records = "1", costtime = CommonHelper.TimerEnd(watch), rows = ListData } } } }; return Content(result.ToJson()); }
Then, how does the front-end parse the json generated above.
The jquery code is as follows:
$.ajax({ url: "@Url.Content("/DataSwitch/GetTestData")?department=" + $("#seldepartment").val() + "&tablename=" + $("#ExcelFileId").val() + "&sjs=" + new Date().getTime() + "&StartTime=" + $("#StartTime").val() + "&EndTime=" + $("#EndTime").val(), type: 'POST', cache: false, data: {}, success: function (result) { result = eval('('+result+')'); var colModels = result.Json.colModels; var colNames = result.Json.colNames; var data = result.Json.data.options; $("#gridTable").jqGrid({ datatype: 'jsonstring', datastr: data, colNames: colNames, colModel: colModels, jsonReader: { root: 'rows', repeatitems: false }, gridview: true, pager: $('#gridPager'), height: $(window).height() - 111, autowidth: true, rowNum: 15, rowList: [15, 30, 50, 100], viewrecords: true, rownumbers: true, shrinkToFit: false }) }, error: function (result) { } }); //end ajax
Currently, different tables can be queried and different table content can be displayed in jqgrid, but another problem occurs here (this problem is hard to find a solution on Baidu)
The problem is that only the content of the table selected for the first time can be displayed, and the page does not work. This problem plagued me for three hours. Finally, I asked in the jqgrid group, some people said that after loading, the html for loading data is gone. Then I tried to reconstruct the html before loading different tables.
$grid = $("<table id='gridTable'></table><div id='gridPager'></div>"); $('#grid_List').empty().html($grid);
At this moment, this short and magical code solves the above problems.
The complete jquery code is as follows:
// Load the table function GetGrid () {var eid = $ ("# ExcelFileId "). val (); if (eid = "") {tipDialog ("select the file type first", 3, 0); return false ;} $ grid = $ ("<table id = 'gridtable'> </table> <div id = 'gridpager'> </div>"); condition ('{grid_list'{.empty({.html ($ grid ); $. ajax ({url: "@ Url. content ("/DataSwitch/GetTestData ")? Department = "+ $ (" # seldepartment "). val () + "& tablename =" + $ ("# ExcelFileId "). val () + "& sjs =" + new Date (). getTime () + "& StartTime =" + $ ("# StartTime "). val () + "& EndTime =" + $ ("# EndTime "). val (), type: 'post', cache: false, data :{}, success: function (result) {result = eval ('+ result + ') '); var colModels = result. json. colModels; var colNames = result. json. colNames; var data = result. json. data. options; $ ("# gridTable "). jqGrid ({datatype: 'jsonstring', datastr: data, colNames: colNames, colModel: colModels, jsonReader: {root: 'rows ', repeatitems: false}, gridview: true, pager: $ ('# gridPager'), height: $ (window ). height ()-111, autowidth: true, rowNum: 15, rowList: [15, 30, 50,100], viewrecords: true, rownumbers: true, shrinkToFit: false })}, error: function (result) {}}); // end ajax}
Now the problem has been solved perfectly.