Asp.net mvc jqgrid queries different tables on the same page. jqgrid displays the headers and data of different tables on different pages. mvcjqgrid

Source: Internet
Author: User
Tags jqgrid

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.