単一のストアド プロシージャからすべての jqGrid データ (親とサブグリッドの両方) をロードするサブグリッドを持つ jqGrid が必要です。私のSPは、次の列を含むテーブルを返しています。
Login | ReadingID | Role | Update Time | Comments
親jqGridにログイン名を表示したい。これは、親グリッドの唯一の列になります。& このレコードごとに、そのログインに対応する読み取り ID レコードを示すサブグリッドが必要です。リーディング ID は、ログインごとにエントリが繰り返される場合があります。Login と ReadingID の間には 1 対多のカーディナリティがあります。ここで、subGrid フッターにログインごとに個別の Reading ID カウントと UpdateTime カウントを表示したいと考えています。さらに、このサブグリッドのフッターの合計を親グリッドのフッターに合計したいと考えています。
要件が十分に明確であることを願っています。誰かがそのような jqGrid を実装したり、デモを作成したりしましたか?
要件と選択したソリューションを説明する更新
次のようにグリッド定義を使用しています
mygrid = $("#RptDocRelease");
// create the grid without filling it (datatype: "local")
mygrid.jqGrid({
datatype: 'local',// to revent initial loading of the grid
postData: {
FromDate: function () { return $("#FromDate").val(); },
ToDate: function () { return $("#ToDate").val(); }
},
url: '@Url.Action("DocReleaseProductivityList", "Reports")',
jsonReader: { repeatitems: false, root: "DocRows" },
colNames: ['@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Login'],
colModel: [{ name: 'Login', index: 'Login', }],
idPrefix: mainGridPrefix,
subGrid: true,
gridview: true,
viewrecords: true,
pgbuttons: false, pginput: false,
recordtext: 'Total Rows:{2}',
emptyrecords: 'Total Rows:0',
pager: '#LogPager',
caption: '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Title',
height: 'auto',
width: 770,
userDataOnFooter: true,
hidegrid: false,
headertitles: true,
loadError: function (xhr, status, error) {
alert(status + " " + error);
},
beforeProcessing: function (data) {
var rows = data.DocRows, l = rows.length, i, item, subgrids = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.id) {
subgrids[item.id] = item.ReadingList;
}
}
data.userdata = subgrids;
},
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
subgrids = $(this).jqGrid("getGridParam", "userData");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: subgrids[pureRowId],
jsonReader: { repeatitems: false },
colNames: ['@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_ReadingID',
'@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Role',
'@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_UpdateTime',
'@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Comments'
],
colModel: [
{ name: 'ReadingID', index: 'ReadingID', width: 80, fixed: true, sorttype: "integer" },
{ name: 'Role', index: 'Role', width: 100, fixed: true },
{
name: 'UpdateTime', index: 'UpdateTime', width: 80, fixed: true, sorttype: "date", formatter: "date",
formatoptions: { srcformat: "m/d/Y h:i:s", newformat: "m/d/Y h:i:s A" }
},
{ name: 'Comments', index: 'Comments' }
],
cmTemplate: { align: 'center', sorttable: false, cellattr: function () { return 'style="white-space: normal!important;' } },
height: 'auto',
width: '100%',
hidegrid: false,
viewrecords: true,
pgbuttons: false, pginput: false,
recordtext: 'Total Rows:{2}',
emptyrecords: 'Total Rows:0',
pager: rowId + '_Pager',
userDataOnFooter: true,
headertitles: true,
gridview: true,
loadError: function (xhr, status, error) {
alert(status + " " + error);
},
gridview: true,
idPrefix: rowId + "_"
});
$("#" + rowId + "_Pager").navGrid('#LogPager', { edit: false, add: false, del: false, search: false, refresh: false })
}
});
mygrid.navGrid('#LogPager', { edit: false, add: false, del: false, search: false, refresh: false })
.closest(".ui-jqgrid").hide();
& サーバーデータは次の構造で返されます
public struct JQGridResult
{
public int page;
public int total;
public int records;
public List<ReportData> DataRows;
public List<DocRelease> DocRows;
public object userdata;
}
public struct DocRelease
{
public string Login { set; get; }
public List<Readings> ReadingList { set; get; }
public object userdata;
}
public struct Readings
{
public int ReadingID { set; get; }
public string Role { set; get; }
public DateTime UpdateTime { set; get; }
public string Comments { set; get; }
}
