我有一个jqGrid可以分组显示数据；有太多列无法方便查看，因此我想将不重要的数据放在子网格中。任何子网格中将永远只有一行。子网格行的数据将与父行的数据同时获得；我想使用subGridRowExpanded回调从父行获取数据，并在用户扩展行以查看子网格时将其放入子网格行。
与此处显示的内容分开，我尝试使用subGridModel指定子网格的名称，但是在这种情况下，对于所示的代码，未调用subGridRowExpanded，我也不知道为什么。
$(document).ready(function() {
$(".aclSection").show();
setListGrid();
function setListGrid() {
console.log("entering setListGrid() in opportunitySalesFunnelList.js");
$("#listGrid").jqGrid(getGridSettings());
$("#listGrid").jqGrid('navGrid', '#funnelOpportunityListPager',
{ cloneToTop:true,refreshtitle: "Reload Grid",
refreshtext: "Refresh Grid",
refreshstate:"current",
refresh: false,edit:false, add:false, del:false, search:false
}
);
$(window).bind('resize', function() {
jQuery("#grid").setGridWidth($('.gridParent').width()-30, true);
}).trigger('resize');
}
function getGridSettings() {
return {
url: "/salespoint/secure/funnel/opportunity/list/getDataMap"
,datatype: "json"
,height: "auto"
,width: 950
,shrinkToFit: true
,loadtext: "Loading..."
,colNames: ["Sales Mgr"
,"Agency / Spersn"
,"Sales Code"
,"Pros Name"
,"Prob"
,"Opp ID"
,"Opp Name"
,"Stg/Sts"
,"3 YR MRC"
,"3 YR NRC"
,"Last Activity"
,"Notes"
]
,colModel:[
{name:"salesManager", index:"salesManager" }
,{name:"agencyOrSalesperson", index:"agencyOrSalesperson" }
,{name:"salesCode", index:"salesCode" }
,{name:"prospectName", index:"prospectName" ,align:'left'}
,{name:"probability", index:"probability" }
,{name:"opportunityId", index:"opportunityId" }
,{name:"opportunityName", index:"opportunityName" ,align:'left'}
,{name:"stageAndStatus", index:"stageAndStatus" }
,{name:"mrc3yr", index:"mrc3yr" ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
,{name:"nrc3yr", index:"nrc3yr" ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
,{name:"lastActivity", index:"lastActivity" ,align:'left' }
,{name:"noteCount", index:"noteCount" }
]
,gridview: true
,subGrid: true
,subGridRowExpanded: function(subgrid_id, rowId1) {
console.log("subGridRowExpanded, subGridDivId1/rowId1:" + subGridDivId1 + "/" + rowId1);
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
var listGrid = $("#" + subgrid_id);
listGrid.html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
listGrid.jqGrid({
colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
,colModel: [ {name:"prospectId", index:"prospectId" }
,{name:"prospectAge", index:"prospectAge" }
,{name:"opportunityAge", index:"opportunityAge" }
,{name:"locationServiceCount",index:"locationServiceCount" ,align:'left' }
,{name:"numberOfLocations", index:"numberOfLocations" }
,{name:"activityDate", index:"activityDate" }
,{name:"activityCreatedBy", index:"activityCreatedBy" }
]
,rowNum: 1
,height: '100%'
})
var rowData = $(this).getRowData(rowId1);
}
,grouping:true
,groupingView:
{
groupField: ["salesManager"]
,groupColumnShow: [true]
,groupText: ["<b>{0}</b>"]
,groupOrder: ["asc"]
,groupSummary: [true] // will use the "summaryTpl" property of the respective column
,groupCollapse: false
,groupDataSorted: true
,formatDisplayField: [function(curValue, srcValue, colModelOption, grpIndex, grpObject) {
return srcValue.toFixed(2);
}]
}
,footerrow:true
,userDataOnFooter:true
,rowNum: 20
,rowList:[20,50,100,100000000]
,rowTotal:4000
,loadonce:true
,ignoreCase:true
,viewRecords:true
,onPaging:function(pgButton) {
var rowNum = $("#listGrid").getGridParam("rowNum");
$.cookie("userOptions_prospectListPagingSize", rowNum);
}
,gridComplete:function(id) {
$("#listGrid").setGridWidth($('.gridParent').width(), true);
$("#listGrid").trigger("resize", [{page:1}]);
}
,emptyrecords: '<span class="jqGridHighlight">No records found</span>'
,pager : '#funnelOpportunityListPager'
};
}
});
当我单击加号图标（确实出现）时，什么都看不到，并且未命中subGridRowExpanded中的第一行代码设置的断点。为什么不调用它，我是否拥有其余设置才能显示数据？
在奥列格回答后编辑：
Version是免费/商业分支之前的4.7 trirand版本。抱歉，我最初没有输入该信息，我在继续上一个问题，但我应该将其包括在内。
是的，从服务器返回数据时，将在salesManager上对数据进行排序。就像我说的那样，分组工作正常；是子网格不起作用。
我也说过，rowNum为1是准确的，主行中只有一个子行。此处的目的是显示有关同一索引的更多列。当有该行的孩子时，subgrid很有用，但在我的情况下，只有一个孩子。我很乐意增加行数，但这是我所要进行数据处理的最大（和最小）行数。
我已经尝试用您的建议纠正subGridRowExpanded，这是现在的样子：
,subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
parentRowData = $(this).jqGrid("getLocalRow", rowid),
// the next line can be used if parent grid doesn't contain local data
//parentRowData = $(this).jqGrid("getRowData", rowid),
$subgridDataDiv = $("#" + subgridDivId);
$subgridDataDiv.append($subgrid); // place subgrid table on the page
// create subgrid
$subgrid.jqGrid({
colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
,colModel: [ {name:"prospectId", }
,{name:"prospectAge" }
,{name:"opportunityAge" }
,{name:"locationServiceCount", align:'left' }
,{name:"numberOfLocations" }
,{name:"activityDate" }
,{name:"activityCreatedBy" }
]
,rowNum: 1
,height: '100%'
});
}
有一条注释行，您可以说“如果父网格不包含本地数据”，但是我的父网格确实包含该子网格的数据，因此我认为该行应保持注释状态。网格数据的JSON如下所示：
{
"userdata": {
"nrc3yr": "2705545.00",
"mrc3yr": "2798103.26"
},
"records": "4",
"rows": [{
"prospectName": "Big Daddy Daycare",
"opportunityName": "Opp2018-06-22",
"nrc3yr": "295.00",
"salesCode": "CMR",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 309,
"prospectAge": "2",
"activityDate": "06-22-2018",
"opportunityAge": 2,
"numberOfLocations": 1,
"locationServiceCount": "Cable (1), IP Hosted (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "CMR",
"opportunityId": 696,
"salesManager": "CMR",
"stageAndStatus": "Draft\/Create",
"mrc3yr": "223.01",
"lastActivity": "Opportunity (696) created (Opp2018-06-22)"
},
{
"prospectName": "Wine Not",
"opportunityName": "Opp20180410-1051",
"nrc3yr": "0.00",
"salesCode": "ADV004",
"probability": "50%",
"noteCount": 17,
"subgrid": [{
"prospectId": 297,
"prospectAge": "89",
"activityDate": "06-07-2018",
"opportunityAge": 75,
"numberOfLocations": 1,
"locationServiceCount": "EoC Symmetric (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "ADV",
"opportunityId": 682,
"salesManager": "JWE",
"stageAndStatus": "Proposal\/In Progress",
"mrc3yr": "312.60",
"lastActivity": "Proposal (1,099) published (Prop20180607-1642)"
},
{
"prospectName": "Ever Lovin' Lovin",
"opportunityName": "Opp20180531-1943",
"nrc3yr": "0.00",
"salesCode": "RTB",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 307,
"prospectAge": "24",
"activityDate": "05-31-2018",
"opportunityAge": 24,
"numberOfLocations": 1,
"locationServiceCount": "EoC Asymmetric (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "RTB",
"opportunityId": 690,
"salesManager": "RTB",
"stageAndStatus": "Proposal\/Complete",
"mrc3yr": "129.95",
"lastActivity": "Proposal (1,098) published (Prop20180531-1947)"
},
{
"prospectName": "mothra",
"opportunityName": "big",
"nrc3yr": "2705250.00",
"salesCode": "RTB",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 280,
"prospectAge": "153",
"activityDate": "06-12-2018",
"opportunityAge": 13,
"numberOfLocations": 501,
"locationServiceCount": "Dedicated (501), EoF Symmetric (500), POTS (500)",
"activityCreatedBy": "alexdev"
}],
"agencyOrSalesperson": "RTB",
"opportunityId": 691,
"salesManager": "RTB",
"stageAndStatus": "Proposal\/Complete",
"mrc3yr": "2797437.70",
"lastActivity": "Proposal (1,106) published (big prop 7)"
}]
}
但是，我目前面临的最大问题是，从未调用subGridRowExpanded函数。我在例程的开头放置了一个断点和console.log（）调用，但未命中该断点，并且未出现console.log（）消息。就像调用subGridRowExpanded的设置有问题一样，我不知道它是什么。
-
更多信息-如果我注释掉分组配置，则单击加号的确会调用subGridRowExpanded函数。在4.7 jqGrid中，是否有可能无法在同一网格中同时使用分组和子网格？扩展只显示新的列标题，没有数据，我现在想弄清楚为什么会这样。如果有一种方法可以在同一个网格中使用这两个功能，那么我想了解一下
答案 0 :(得分：0)
subGridRowExpanded当前代码错误。在单击子网格图标（通常为“ +”）时，jqGrid在当前行下方添加一行，其中div覆盖了最多的列。 div的ID将作为第一个参数转发到subGridRowExpanded。通过代码var listGrid = $("#" + subgrid_id);，您可以在div上获得jQuery包装器，然后在div上调用listGrid.jqGrid({...})。另一方面，只能在<table>元素上创建jqGrid。您可以通过添加.children("table")（我的意思是listGrid.children("table").jqGrid({...})）或使用类似模板的方法来修复代码
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
parentRowData = $(this).jqGrid("getLocalRow", rowid),
// the next line can be used if parent grid doesn't contain local data
//parentRowData = $(this).jqGrid("getRowData", rowid),
$subgridDataDiv = $("#" + subgridDivId);
$subgridDataDiv.append($subgrid); // place subgrid table on the page
// create subgrid
$subgrid.jqGrid({
// ...
});
}