asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页

时间:2023-03-09 15:41:19
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
}

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