スクリプト:
$.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);
}
両方を一緒にするにはどうすればよいですか？(動的な名前とページごとのサーバーからのデータのフェッチ)
更新(シナリオ)
5分ごとに検針があります。そして、それらを毎時、毎日などにグループ化しました...また、それらをmeterType（{T1、T2、T3}、{Reactive、Active、Capasitive、..}、{...}）にグループ化しました。
たとえば、送電網:
T1 | T2 | T3 | .... |
エネルギーグリッド:
Active | Reactive | .... | ....
その他:
グリッドのデフォルトで追加のパラメーター (rangeType、meterType) を渡したいです。そして、新しいグリッド値 (colNames、ColModels、および data) を作成します。では、どうすればこれらすべてを行うことができますか。
グリッドの colNames を返すメソッドと、グリッド データを返すもう 1 つのメソッドである可能性があります。
つまり ：
1. public Json GetGridOptions{ return colNames and colModels }
2. public Json GetGridData{ return GridData }
1. $.ajax { url : GetGridOptions }
2. $.grid { url : GetGridData }}
ありがとう。