我有一个jqGrid,它分组显示数据;有太多的列无法方便地查看,所以我希望将不太重要的数据放在子网格中。任何子网格中永远只有一行。子网格行的数据将与父行中的数据同时获取;我想使用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中代码的第一行设置的断点也没有被命中。为什么不调用它?我是否有其他设置来显示数据?
在Oleg回答后编辑:
是的,数据从服务器返回时在salesManager上进行排序。正如我所说的,分组是有效的;子网格不起作用。
我也说过,rowNum为1是准确的,只有一个子行的主行。这里的目的是显示关于同一索引的更多列。当有行的子级时,子网格很有用,但在我的例子中只有一个子级。我很乐意让这个数字更大,但这是我的案例中有数据的最大(也是最小)行数。
我试着用你的建议来纠正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%'
});
}
{
"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)"
}]
}
--
