MVC jqgrid子网格没出现？ [英] MVC jqgrid subgrid not showing up?
本文介绍了MVC jqgrid子网格没出现？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个jqgrid和subgrid。我使用json对象来填充两个网格中的数据，但只有主网格填充子网格不显示。我附上了我的代码和屏幕截图。请给我一个解决方案。
预付谢谢&关于K. Aravind
< table id = grid>< tr>< td> < / td > < / tr > < / table >
< div id = pagerId> < / div >
< script type = ' text / javascript' >
// 调整大小以适合页面大小
$（ window ）。on（' resize.jqGrid'， function （）{
$（ ＃grid ）。jqGrid（' setGridWidth'，$（ .page-content）。width（））;
}）
// 在侧边栏上调整大小/展开 b var parent_column = $（ ＃grid）。nearest（' [class * =col - ]'）;
$（ document ）。on（' settings.ace.jqGrid'， function （ev，event_name，collapsed）{
if （event_name === ' sidebar_collapsed' || event_name === ' main_container_fixed'）{
// setTimeout仅适用于webkit，为DOM更改提供时间，然后重绘!!!
setTimeout（ function （）{
$（ ＃grid）。jqGrid（' setGridWidth'，parent_column.width（））;
}， 0 ）;
}
}）
// var data = [[48803，DSK1， ，02200220，OPEN]，[48769，APPR，，77733337，ENTERED]];
// var subgridData = [[1，Item 1，3]，[2，Item 2，5]];
< span class =code-keyword> var globalSubGridNames = [];
$（ ＃grid）。jqGrid（{
url：< span class =code-string>' @ Url.Action（MenuGridData）'，
datatype： json，
mtype：' 获取'，
高度： 200 ，
colNames：[' menu_key'，' 角色菜单名称，' 角色状态']，
colModel： [{
key： true ，
name：' menu_key'，
index：' k ey'，
隐藏： true
}，
{
key： false ，
name：' 角色菜单名称' ，
索引：' 菜单名称，
格式化程序： function （cellvalue，options，rowObject）{
var x = ' @ Html.ActionLink（Col，Index，Roles，new {id =menuid}，new {@style =color：black ; font-weight：bold;}）';
return x.replace（ menuid，rowObject.menu_key）.replace（ Col，rowObject.menu_name）;
}，sortable： true ，align： ' left'，width： 300
}，
{
name： Status，index： status，editable： true ，edittype： 选择，editoptions：{value： FE：FedEx; IN：InTime; TN：TNT; AR：ARAMEX}
}
]，
pager：' pagerId'，
sortname ：' menu_key'，
sortorder： asc，
viewrecords： true ，
rowNum：< span class =code-digit> 20 ，
rowList：[ 10 ， 20 ， 50 ， 100 ]，
身高：' 330px'，mtype：' GET'，
emptyrecords：' 找不到记录'，
autowidth： true ，
mutiselect： true ，
altRows： true ，
loadComplete：功能（）{
var table = this ;
setTimeout（ function （）{
updatePagerIcons（table）;
}， 0 ）;
}，
jsonReader：{
root： rows ，
页： page，
总计： total，
记录： records，
repeatitems： false ，
userdata： userdata
}，
subGrid： true ，
subGridOptions：{
plusicon：< span class =code-string> ion-plus-round，
minusicon ： ion-minus-round，
openicon： ion-minus-round，
reloadOnExpand： false ，
selectOnExpand： true
}，
subGridRowExpanded： function （subgrid_id，row_id） {
var subgrid_table_id，pager_id; subgrid_table_id = subgrid_id + _ t;
pager_id = p _ + subgrid_table_id;
$（ ＃ + subgrid_id）.html（ < table id =' + subgrid_table_id + 'class ='scroll'>< / table>< div id =' + pager_id + < span class =code-string>'class ='scroll'>< / div>）;
alert（subgrid_table_id）;
$（ ＃ + subgrid_table_id）.jqGrid（{
url： ' @ Url.Action（MenuSubGridData）'，
datatype： json，
mtype：' < span class =code-string> POST'，
colNames：[' SubMenukey' ，' SubMenu']，
colModel：[{name： menu_key，index： menu_key，键： true ，隐藏： true } ，
{name： menu_name，index： menu_name，宽度： 130 }，
]，
rowNum： 20 ，
pager：pager_id，
sortname：' menu_name '，
sortorder： asc，height： 100％'，
viewrecords： true ，
rowNum： 5 ，
rowList：[ 10 ， 20 ， 50 ， 100 ]，
height ：' < span class =code-string> 330px'，
emptyrecords：' 未找到记录'，
autowidth： true ，
altRows： true ，
loadComplete： function （）{
var table = 此;
setTimeout（ function （）{
updatePagerIcons（table）;
}， 0 ）;
}，
@ * jsonReader：{
root： rows，
page： page，
总计： total，
记录： 记录，
repeatitems： false ，
userdata： userdata
}，* @
}）;
}
}）;
// CONTROLLER FILE
public JsonResult MenuSubGridData（ int 行， int page，string sidx，string sord）
{
var subgridData = from ladms in db.adm_menus其中ladms.menu_parent_key == rows
select new
{
ladms.menu_key，
ladms.menu_name，
// lstval.inactive，
// lstval.list_value_code，
// list_key = lst.list_name
};
var count = subgridData.Count（）;
int pageIndex = Convert.ToInt32（page） - 1 ;
int pageSize = rows;
int totalRecords = count;
int totalPages =（ int ） Math .Ceiling(( float ）totalRecords /（ float ）pageSize）;
var pagedData = new object（）;
// String s =menu_name;
switch （sidx）
{
case menu_key：
if （sord.ToLower（）== asc）
{
pagedData = subgridData.Select（a => new {a.menu_key，a.menu_name}）。OrderBy（a => a.menu_key）.Skip（pageIndex * pageSize）.Take（pageSize）;
}
else
{
pagedData = subgridData.Select（a => new {a.menu_key，a.menu_name}）。OrderByDescending（a => a.menu_key）.Skip（pageIndex * pageSize）.Take（pageSize）;
}
break ;
case menu_name ：
if （sord.ToLower（）== asc）
{
pagedData = subgridData.Select（a => new {a.menu_key，a .menu_name}）。OrderBy（a => a.menu_key）.OrderBy（a => a.menu_name）.Skip（pageIndex * pageSize）.Take（pageSize）;
}
else
{
pagedData = subgridData.Select（a => new {a.menu_key，a.menu_name}）。OrderBy（a => a.menu_key）.OrderByDescending（a => a.menu_name）.Skip（pageIndex * pageSize）.Take（页面大小）;
}
break ;
// caselist_value_code：
// if（sord.ToLower（）==asc）
// {
// pagedData = gridData.Select（a => new {a.list_value_key，a.list_key，a.inactive，a.list_value_name，a.list_value_code}）。OrderBy（a => a.list_value_code）.Skip（pageIndex * pageSize）。获取（pageSize）;
// }
// else
// {
// pagedData = gridData.Select（a => new {a.list_value_key，a.list_key，a.inactive，a.list_value_name，a.list_value_code}）。OrderByDescending（a => a.list_value_code）.Skip（pageIndex * pageSize）.Take（pageSize）;
// }
// break;
默认：
pagedData = subgridData。选择（a => new {a.menu_key，a.menu_name}）。OrderBy（a => a.menu_key）.Skip（pageIndex * pageSize）。采取（pageSize的）;
break ;
}
return Json（ new
{
page = page，
records = totalRecords，
rows = pagedData，
total = totalPages
}，JsonRequestBehavior.AllowGet）;
}
public JsonResult MenuGridData（ int 行， int 页面，字符串sidx，字符串sord）
{
var gridData = from lstval < span class =code-keyword> in db.adm_menus
// join in lst in lstval.list_key上的db.mas_lists等于lst.list_key
其中lstval.menu_parent_key == null
select new
{
lstval.menu_key，
lstval.menu_name，
// lstval.inactive，
< span class =code-comment> // lstval.list_value_code，
// list_key = lst.list_name
};
var count = gridData.Count（）;
int pageIndex = Convert.ToInt32（page） - 1 ;
int pageSize = rows;
int totalRecords = count;
int totalPages =（ int ） Math .Ceiling(( float ）totalRecords /（ float ）pageSize）;
var pagedData = new object（）;
字符串 s = menu_name;
switch （sidx）
{
case menu_key：
if （sord。 ToLower（）== asc）
{
pagedData = gridData。选择（a => new {a.menu_key，a.menu_name}）。OrderBy（a => a.menu_key）.Skip（pageIndex * pageSize）。采取（pageSize的）;
}
else
{
pagedData = gridData.Select（a => new {a.menu_key，a.menu_name}）。OrderByDescending（a => a.menu_key）.Skip（pageIndex * pageSize）.Take（pageSize）;
}
break ;
case menu_name ：
if （sord.ToLower（）== asc）
{
pagedData = gridData.Select（a => new {a.menu_key，a .menu_name}）。OrderBy（a => a.menu_key）.OrderBy（a => a.menu_name）.Skip（pageIndex * pageSize）.Take（pageSize）;
}
else
{
pagedData = gridData.Select（a => new {a.menu_key，a.menu_name}）。OrderBy（a => a.menu_key）.OrderByDescending（a => a.menu_name）.Skip（pageIndex * pageSize）.Take（页面大小）;
}
break ;
// caselist_value_code：
// if（sord.ToLower（）==asc）
// {
// pagedData = gridData.Select（a => new {a.list_value_key，a.list_key，a.inactive，a.list_value_name，a.list_value_code}）。OrderBy（a => a.list_value_code）.Skip（pageIndex * pageSize）。获取（pageSize）;
// }
// else
// {
// pagedData = gridData.Select（a => new {a.list_value_key，a.list_key，a.inactive，a.list_value_name，a.list_value_code}）。OrderByDescending（a => a.list_value_code）.Skip（pageIndex * pageSize）.Take（pageSize）;
// }
// break;
默认：
pagedData = gridData.Select（a => new {a.menu_key，a.menu_name}）。OrderBy（a => a.menu_key）.Skip（pageIndex * pageSize）.Take（pageSize）;
break ;
}
return Json（ new
{
page = page，
records = totalRecords，
rows = pagedData，
total = totalPages
}，JsonRequestBehavior.AllowGet）;
}
解决方案
（ window ）。on（< span class =code-string>' resize.jqGrid'， function （） {
（ ＃grid）。jqGrid（< span class =code-string>' setGridWidth'，
（ .page-content）。width（））;
}）
// 侧栏上的大小调整折叠/展开
var parent_column =
I am having a jqgrid and subgrid. And I am using json object to populate data in both grid but only main grid is populating subgrid not be shown. i have attached my code and screen shot with this. please give a solution to me.
advance thanks & regards K. Aravind
<table id="grid"><tr><td></td></tr></table>
<div id="pagerId"></div>
<script type='text/javascript'>
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$("#grid").jqGrid('setGridWidth', $(".page-content").width());
})
//resize on sidebar collapse/expand
var parent_column = $("#grid").closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function () {
$("#grid").jqGrid('setGridWidth', parent_column.width());
}, 0);
}
})
// var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];
// var subgridData = [[1, "Item 1", 3], [2, "Item 2", 5]];
var globalSubGridNames = [];
$("#grid").jqGrid({
url: '@Url.Action("MenuGridData")',
datatype: "json",
mtype: 'Get',
height: 200,
colNames: ['menu_key', 'Role Menu Name', 'Role Status'],
colModel: [{
key: true,
name: 'menu_key',
index: 'key',
hidden: true
},
{
key: false,
name: 'Role Menu Name',
index: 'menu name',
formatter: function (cellvalue, options, rowObject) {
var x = '@Html.ActionLink("Col", "Index", "Roles", new { id = "menuid" }, new { @style = "color:black; font-weight:bold;" })';
return x.replace("menuid", rowObject.menu_key).replace("Col", rowObject.menu_name);
}, sortable: true, align: 'left', width: 300
},
{
name: "Status", index: "status", editable: true, edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" }
}
],
pager: 'pagerId',
sortname: 'menu_key',
sortorder: "asc",
viewrecords: true,
rowNum: 20,
rowList: [10, 20, 50, 100],
height: '330px', mtype: 'GET',
emptyrecords: 'No records found',
autowidth: true,
mutiselect: true,
altRows: true,
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
}, 0);
},
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
subGrid: true,
subGridOptions: {
"plusicon": "ion-plus-round",
"minusicon": "ion-minus-round",
"openicon": "ion-minus-round",
"reloadOnExpand": false,
"selectOnExpand": true
},
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id, pager_id; subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
alert(subgrid_table_id);
$("#" + subgrid_table_id).jqGrid({
url: '@Url.Action("MenuSubGridData")',
datatype: "json",
mtype: 'POST',
colNames: ['SubMenukey', 'SubMenu'],
colModel: [{ name: "menu_key", index: "menu_key", key: true, hidden: true },
{ name: "menu_name", index: "menu_name", width: 130 },
],
rowNum: 20,
pager: pager_id,
sortname: 'menu_name',
sortorder: "asc", height: '100%',
viewrecords: true,
rowNum: 5,
rowList: [10, 20, 50, 100],
height: '330px',
emptyrecords: 'No records found',
autowidth: true,
altRows: true,
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
}, 0);
},
@* jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},*@
});
}
});
// CONTROLLER FILE
public JsonResult MenuSubGridData(int rows, int page, string sidx, string sord)
{
var subgridData = from ladms in db.adm_menus where ladms.menu_parent_key == rows
select new
{
ladms.menu_key,
ladms.menu_name,
//lstval.inactive,
//lstval.list_value_code,
//list_key = lst.list_name
};
var count = subgridData.Count();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = count;
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var pagedData = new object();
//String s = "menu_name";
switch (sidx)
{
case "menu_key":
if (sord.ToLower() == "asc")
{
pagedData = subgridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
pagedData = subgridData.Select(a => new { a.menu_key, a.menu_name }).OrderByDescending(a => a.menu_key).Skip(pageIndex * pageSize).Take(pageSize);
}
break;
case "menu_name":
if (sord.ToLower() == "asc")
{
pagedData = subgridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).OrderBy(a => a.menu_name).Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
pagedData = subgridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).OrderByDescending(a => a.menu_name).Skip(pageIndex * pageSize).Take(pageSize);
}
break;
//case "list_value_code":
// if (sord.ToLower() == "asc")
// {
// pagedData = gridData.Select(a => new { a.list_value_key, a.list_key, a.inactive, a.list_value_name, a.list_value_code }).OrderBy(a => a.list_value_code).Skip(pageIndex * pageSize).Take(pageSize);
// }
// else
// {
// pagedData = gridData.Select(a => new { a.list_value_key, a.list_key, a.inactive, a.list_value_name, a.list_value_code }).OrderByDescending(a => a.list_value_code).Skip(pageIndex * pageSize).Take(pageSize);
// }
// break;
default:
pagedData = subgridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).Skip(pageIndex * pageSize).Take(pageSize);
break;
}
return Json(new
{
page = page,
records = totalRecords,
rows = pagedData,
total = totalPages
}, JsonRequestBehavior.AllowGet);
}
public JsonResult MenuGridData(int rows, int page, string sidx, string sord)
{
var gridData = from lstval in db.adm_menus
// join lst in db.mas_lists on lstval.list_key equals lst.list_key
where lstval.menu_parent_key==null
select new
{
lstval.menu_key,
lstval.menu_name,
//lstval.inactive,
//lstval.list_value_code,
//list_key = lst.list_name
};
var count = gridData.Count();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = count;
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var pagedData = new object();
String s = "menu_name";
switch (sidx)
{
case "menu_key":
if (sord.ToLower() == "asc")
{
pagedData = gridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
pagedData = gridData.Select(a => new { a.menu_key, a.menu_name }).OrderByDescending(a => a.menu_key).Skip(pageIndex * pageSize).Take(pageSize);
}
break;
case "menu_name":
if (sord.ToLower() == "asc")
{
pagedData = gridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).OrderBy(a => a.menu_name).Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
pagedData = gridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).OrderByDescending(a => a.menu_name).Skip(pageIndex * pageSize).Take(pageSize);
}
break;
//case "list_value_code":
// if (sord.ToLower() == "asc")
// {
// pagedData = gridData.Select(a => new { a.list_value_key, a.list_key, a.inactive, a.list_value_name, a.list_value_code }).OrderBy(a => a.list_value_code).Skip(pageIndex * pageSize).Take(pageSize);
// }
// else
// {
// pagedData = gridData.Select(a => new { a.list_value_key, a.list_key, a.inactive, a.list_value_name, a.list_value_code }).OrderByDescending(a => a.list_value_code).Skip(pageIndex * pageSize).Take(pageSize);
// }
// break;
default:
pagedData = gridData.Select(a => new { a.menu_key, a.menu_name }).OrderBy(a => a.menu_key).Skip(pageIndex * pageSize).Take(pageSize);
break;
}
return Json(new
{
page = page,
records = totalRecords,
rows = pagedData,
total = totalPages
}, JsonRequestBehavior.AllowGet);
} 解决方案
(window).on('resize.jqGrid', function () {
("#grid").jqGrid('setGridWidth',
(".page-content").width()); }) //resize on sidebar collapse/expand var parent_column =
这篇关于MVC jqgrid子网格没出现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
