你的位置:首页 > ASP.net教程

[ASP.net教程]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  }

 

至此问题就被完美的解决了。