我试图使用 jQGrid 构建一个子网格来显示父子关系。我关注经理和员工的关系。 我正在服务器上构建 JSON,这就是它的样子
{"total":1,"page":1,"records":20,
"rows":[{"id":"Mgr 001","EmpId":"Mgr 001","Manager Name":"Murali","Dept":"D1"
,"Employees":[{"EmpId":"Emp 100","Name":"Alex","Dept":"Infrastucture"}]}]
The problem is when i click on expand i am finding the data from locally stored employeeLocalJSON variable and assigning the collection to subgrid. But it was not shown in subgrid. I have no idea why it is so. I want to load json from server and to show subgrid i should use the same, so i stored that one in local variable employeeLocalJSON.
我关注了jqgrid subgrids from a single nested json
jqGrid Subgrid with "local" Data
JqGrid with subgrid and single XML file as input
这是我的 jQGrid 代码
$(function() {
var employeeLocalJSON;
jQuery("#list").jqGrid({
//start
url: '/Employee/Search',
datatype: "json",
postData: {
searchModel: function () {
var result = {}, i, item,
formInfo = $('#search-form').serializeArray(),
l = formInfo.length;
for (i = 0; i < l; i++) {
item = formInfo[i];
result[item.name] = item.value;
}
return JSON.stringify(result);
}
},
mtype: "POST",
colNames: ['id', 'EmpId', 'Manager Name', 'Dept'],
colModel: [
{ name: 'id', index: 'id', hidden: true, width: 1, align: 'left', key: true },
{ name: 'EmpId', index: 'EmpId', search: true, width: 260, align: 'left' },
{ name: 'ManagerName', index: 'ManagerName', search: false, width: 110, align: 'left' },
{ name: 'Dept', index: 'Dept', search: true, width: 54, align: 'left' }],
pager: $("#pager"),
rowNum: 20,
rowList: [5, 10, 20, 50],
sortname: 'EmpId',
sortorder: "asc",
viewrecords: true,
loadonce: true,
sortable: true,
jsonReader: {
repeatitems: false
},
loadComplete: function (data) {
if (data.rows) {
employeeLocalJSON = data.rows; // save original JSON data
}
},
caption: 'Employee Manager Detail',
subGrid: true,
subGridOptions: {
"plusicon": "ui-icon-triangle-1-e",
"minusicon": "ui-icon-triangle-1-s",
"openicon": "ui-icon-arrowreturn-1-e",
"reloadOnExpand": false,
"selectOnExpand": true
},
subGridRowExpanded: function (grid_id, row_id) {
// //start of subgrid row expanded
var subgrid_table_id, pager_id;
subgrid_table_id = grid_id + "_tone";
pager_id = "pone_" + subgrid_table_id;
$("#" + grid_id).html("<table id='" + subgrid_table_id + "' class='scroll' style='width:100%'></table><div id='" + pager_id + "' class='scroll'></div>");
var indexes = $(this).jqGrid('getGridParam', '_index');
var empList = employeeLocalJSON[indexes[row_id]].Employees;
$("#" + subgrid_table_id).jqGrid({
datatype: 'local',
data: empList,
colNames: ['EmpId', 'Name', 'Dept'],
colModel: [
{ name: 'EmpId', width: 170 },
{ name: 'Name', width: 110 },
{ name: 'Dept', width: 60 }
],
sortname: 'EmpId',
viewrecords: true,
sortorder: "asc",
width: 960
});
}
//end
});
// });
jQuery("#list").jqGrid('navGrid', '#pager', { add: false, edit: false, del: false });
});
如何实现从单个 JSON 加载子网格?我的代码可能有什么问题?即使我绑定(bind)了数据,我也看不到子网格
最佳答案
您遇到的第一个重要问题是在 id
值中使用空格(请参阅"id":"Mgr 001"
您的数据)。我可以建议您两种解决问题的方法。第一个是更改生成 id 值的算法。例如,如果可能的话,您可以删除 id 中的所有空格,或者将 ""
替换为任何其他字符。另一种选择是更改 the line jqGrid代码
return String(sid).replace(/[!"#$%&'()*+,.\/:;<=>?@\[\\\]\^`{|}~]/g,"\\$&");
至
return String(sid).replace(/[!"#$%&'()* +,.\/:;<=>?@\[\\\]\^`{|}~]/g,"\\$&");
(向应由 jqGrid 编码的字符列表添加空格)。
要在一个响应中与主网格数据一起发布子网格信息,我建议您使用 JSON 的 userdata
部分,稍后将作为 "userData 访问“
(大小写很重要!)jqGrid 的参数。如果您无法在服务器端执行此操作,您可以在 beforeProcessing
回调中对服务器响应进行相应的转换。请参阅the answer对应的代码示例。
已更新:我再次提醒托尼(请参阅 here)有关在 id
中转义空格的建议。刚才(参见 here )更改已包含在 jqGrid 的主代码中。因此,在下一个版本(当前版本 4.4.3 更高)中,jqGrid 将使用具有空格的 ids。
关于jquery - jQGrid 子网格,具有服务器生成的单个 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14559942/