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文件中。代码片段如下

aaarticlea/png;base64,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" alt="" />

所以展示每个表的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[].ToString().Trim(',').Split(',');
            string[] englishname = list[].ToString().Trim(',').Split(',');
            for (int i = ; i < chinesname.Length; i++)
            {
                colnames += "'" + chinesname[i].ToString() + "',";
            }
            List<Department> list1 = new List<Department>();
            for (int j = ; 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 = "",
                            total = "",
                            records = "",
                            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
    }

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