脚本：
$.ajax({
url: '/Widget/GetTestData',
type: 'POST',
data: {},
success: function (result) {
var colModels = result.Json.colModels;
var colNames = result.Json.colNames;
var data = result.Json.data.options;
$("#grid_table").jqGrid({
datatype: 'jsonstring',
datastr: data,
colNames: colNames,
colModel: colModels,
jsonReader: {
root: 'rows',
repeatitems: false
},
gridview: true,
pager: $('#gridpager'),
height: 349,
width:968,
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true
}).navGrid('#gridpager'); //end jqgrid
},
error: function (result) {
alert("Seçilen kritere uygun veri bulunamadı!");
}
}); //end ajax
控制器
public ActionResult GetTestData()
{
var result = new
{
Json = new
{
colNames = new[]
{
"T1","T2"
},
colModels = new[]
{
new {
index = "T1",
label = "T1",
name = "T1",
width = 100
},new {
index = "T2",
label = "T2",
name = "T2",
width = 100
}
},
data = new
{
options = new
{
page = "1",
total = "1",
records = "1",
rows = new[] {
new{T1=123,T2=321},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934},
new{T1=4532,T2=934}
}
}
}
}
};
}
此代码有效。它从服务器获取所有数据。但我想从每页的服务器中获取部分数据。
当我写下面的内容时，我可以做到我想要的，但我无法动态地获得colNames。
$("#grid_table").jqGrid({
url: '/Widget/GetGridData',
datatype: "json",
mtype: 'POST',
postData: { DateRangeType: date_range_id, MeterType: meter_type_id, StartDate: start_date, EndDate: end_date },
colNames: ['Okuma Tarihi', 'T1', 'T2', 'T2', 'Toplam'],
colModel: [
{ name: 'OkumaTarihi', index: 'OkumaTarihi', width: 150, sortable: true, editable: false },
{ name: 'T1', index: 'T1', sortable: true, editable: false },
{ name: 'T2', index: 'T2', sortable: true, editable: false },
{ name: 'T3', index: 'T3', sortable: true, editable: false },
{ name: 'Toplam', index: 'Toplam', sortable: true, editable: false }
],
rowNum: 20,
rowList: [20, 30],
pager: $('#gridpager'),
sortname: 'Name',
viewrecords: true,
sortorder: "asc",
width: 968,
height: 349,
jsonReader: {
root: "rows", //array containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: "id" //index of the column with the PK in it
}
}).navGrid('#gridpager'); //end jqgrid
控制器
public ActionResult GetGridData(string sidx, string sord, int page, int rows)
{
IEnumerable<MeterReadingsForChart> meterReadings = MeterReadingManager.GetCustomerTotalMeterReadings(9, 1, /*DateTimeManager.GetStartDate(0)*/DateTime.Now.AddDays(-40), DateTime.Now, DateTimeManager.GetTimeIntervalTypeById(0));
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = meterReadings.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var result = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = meterReadings.Skip((pageIndex) * pageSize).Select(x => new { T1 = x.Name, OkumaTarihi = x.ReadDate.ToString("dd.MM.yyyy - hh:mm:ss"), Value = x.Value }).ToArray()
};
return Json(result, JsonRequestBehavior.AllowGet);
}
如何将它们组合在一起？ （动态colnames和从每页服务器获取数据）
更新（情景）
我每五分钟读一次电表。我每小时，每天等将它们分组......我还将它们分组为meterType（{T1，T2，T3}，{Reactive，Active，Capasitive，..}，{...}）。
对于电网测试：
T1 | T2 | T3 | .... |
能源网格：
Active | Reactive | .... | ....
和其他人：
我想传递额外的参数（rangeType，meterType）和网格的默认值。并创建新的网格值（colNames，ColModels和数据）。那我怎么能做所有这些。
它可以是一个返回网格colNames的方法，还有一个返回网格数据的方法吗？
我的意思是：
1. public Json GetGridOptions{ return colNames and colModels }
2. public Json GetGridData{ return GridData }
1. $.ajax { url : GetGridOptions }
2. $.grid { url : GetGridData }}
感谢。
答案 0 :(得分：1)
colModel和colNames的动态加载在某些情况下很实用。如果这样做，则在success回调自己的Ajax请求中创建网格。为确保您第一次执行此操作，您应另外使用GridUnload（有关演示，请参阅here）。
顺便说一下，您不能使用colNames并使用colModel内的label属性。如果jqGrid将为您生成colNames。
如果您需要更改loadComplete或beforeProcessing内的列标题，仅仅因为标题已经setGridParam而不足以使用colNames创建。因此，您必须手动修改列标题的文本。您可以使用以下事实：列标题将来自"jqgh_"，网格的ID和来自name的{{1}}属性的值。
如果您使用colModel这样的HTML格式的colNames值，则会使用与<span class="someClass">My column Header Text</span>相同的结果，但您可以更轻松地找到修改标题。
如果您使用columnChooser，则仍需要将"My column Header Text"与setGridParam一起使用。 colNames的{{1}}读取当前值并在相应的对话框中使用它。