asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页
基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入</a>中不同的部门上传不同的excel文件类型，当在同一个页面查询时怎么办呢。
解决方案：根据传过来的表名和时间参数一次性把数据全部加载到table中，其中表头要我们一个个去定，主体的顺序我们也要和表头一样，加载到前台再用表格分页控件来分页，我这里大概有100多个excel文件类型，他们的列名都不要，想想这样的做法不且实际。
有没有其他的解决方案呢，看了很多的jqgrid示例，他们的表头（colNames）和内容（colModel）都是首先定死的。这里我想到一个解决方案就是把colNames和colModel都做成活的，这样不就可以完美解决上面的问题了吗，
想法总是好的，但做起来不是一帆风顺的，但前提是你得有这种想法才行。
想法和思路：
1.把jqgrid的colNames和colModel都做成活的，但是每个表的colNames都不一样，而且他们的顺序必须一致才行，怎么办呢，在<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入</a>这篇文章中我上传文件成功之后会把他们的colNames和colModel都保存在以他们表名命名的txt文件中。代码片段如下
所以展示每个表的colNames和colModel就不成问题
后台c#代码如下:
[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()); }
那么前台改如何解析上面生成的json呢。
jquery代码如下
$.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
现在查询不同的表可以显示在jqgrid中显示不同的表内容了，但是这里又出现了一个问题（这个问题你是在百度上很难找得到解决方案的）
问题就是只能显示第一次选择的表内容，而且分页也没有效果，这个问题困扰了我三个小时，最后在jqgrid群里问了一下，有人说是加载之后，加载数据的html没有了。这时我就试试了再加载不同表格之前我重新构造一下html。
$grid = $("<table id='gridTable'></table><div id='gridPager'></div>");
$('#grid_List').empty().html($grid);
这时这段简短而神奇的代码解决了上面遇到的问题。
完整的jquery代码如下
//加载表格 function GetGrid() { var eid = $("#ExcelFileId").val(); if (eid == "") { tipDialog("请先选择文件类型", 3,0); return false; } $grid = $("<table id='gridTable'></table><div id='gridPager'></div>"); $('#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 }
至此问题就被完美的解决了。
