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
    }

 

至此問題就被完美的解決了。