【发布时间】：2016-05-26 22:20:57
【问题描述】：
我目前正在使用 jqgrid 4.8.2 我有一个固定宽度为 800 像素的父网格和一个更大的子网格。我已经设置了父网格和子网格，因此 shrinkToFit 为 false。子网格的滚动条出现并正常工作。不幸的是，当我滚动子网格时，父网格中的数据行也会滚动，但父网格标题不会滚动。
我尝试使用 jsFiddle 复制这种体验，但由于某种原因，jqgrid 在那里的工作方式有所不同。我没有得到子网格的滚动条，即使我在服务器上运行的代码完全相同。
这是我正在使用的代码：
var mainGrid = {
"total": 1,
"page": 1,
"pageSize": 20,
"records": 1,
"rows": [{
"siteId": 12516086,
"siteName": "Detroit",
"siteAddress": "1 Woodward",
"siteCitySt": "Detroit, MI",
"siteZip": "48205",
"productCd": "ProductX",
"productName": "Product X",
"finishedSize": null,
"estimatedPieceWeight": 0.125,
"vdpTypeCode": null,
"taHouseholds": 1071689,
"taDistribution": 445139,
"distribution": 445139,
"avgCpm": 32.32084084084084084084084084084084084084,
"investment": 19542.8,
"coverage": 41.54
}]
};
var subGrid = {
"total": 1,
"page": 1,
"pageSize": 20,
"records": 2,
"rows": [{
"mediaPlanId": 3003,
"mbuHdrId": 4035986,
"mbuDtlId": 10442611,
"commonMbuId": 99731,
"ggId": 1244425,
"fkGeoProfileId": 15032061,
"fkSite": 12516086,
"wrapZoneId": 15049936,
"wrapZone": "MI Detroit/ Highland Park/ Hamtramck",
"productCd": "INS_SHARED",
"productName": "Insert - Shared Mail",
"wrapPagePosition": null,
"finishedSize": null,
"estimatedPieceWeight": 0.125,
"vdpTypeCode": null,
"geocode": "48205D1",
"zip": "48205",
"atz": "D1",
"cityName": "DETROIT, MI",
"households": 2088,
"taHouseholds": 2088,
"distribution": 2092,
"cpm": 0,
"investment": 0.0,
"overallCoverage": 100.191570881226053639846743295019157088,
"taCoverage": 100.191570881226053639846743295019157088,
"distance": 0.62,
"coverageDescDisplay": "Pcd",
"coverageDesc": "Private Carrier Delivery",
"ihDate": 1463371200000,
"ihDay": "M/T",
"pricingMarket": "MI DETROIT",
"fkSdmId": 15075973,
"sdmName": "MI Detroit",
"fkVariableId": 7039,
"primaryVariableName": "Candy & Chewing Gum",
"variableContents": "INDEX",
"variableValue": 63.52,
"isSelected": true,
"isActiveMbuCmn": true,
"isActiveMbuHdr": true,
"isActiveMbuDtl": true,
"isUsedInCbx": true,
"isBought": true,
"var1Name": "Candy & Chewing Gum",
"var1Contents": "INDEX",
"var1Value": "64",
"var2Name": "Toys, Games, and Hobbies",
"var2Contents": "INDEX",
"var2Value": "74",
"var3Name": "Casual Dining: Olive Garden",
"var3Contents": "INDEX",
"var3Value": "83"
}, {
"mediaPlanId": 3003,
"mbuHdrId": 4035988,
"mbuDtlId": 10442613,
"commonMbuId": 99732,
"ggId": 1244426,
"fkGeoProfileId": 22973059,
"fkSite": 12516086,
"wrapZoneId": 15049936,
"wrapZone": "MI Detroit/ Highland Park/ Hamtramck",
"productCd": "INS_SHARED",
"productName": "Insert - Shared Mail",
"wrapPagePosition": null,
"finishedSize": null,
"estimatedPieceWeight": 0.125,
"vdpTypeCode": null,
"geocode": "48205G1",
"zip": "48205",
"atz": "G1",
"cityName": "DETROIT, MI",
"households": 1156,
"taHouseholds": 1156,
"distribution": 1157,
"cpm": 0,
"investment": 0.0,
"overallCoverage": 100.086505190311418685121107266435986159,
"taCoverage": 100.086505190311418685121107266435986159,
"distance": 0.74,
"coverageDescDisplay": "Pcd",
"coverageDesc": "Private Carrier Delivery",
"ihDate": 1463371200000,
"ihDay": "M/T",
"pricingMarket": "MI DETROIT",
"fkSdmId": 15075973,
"sdmName": "MI Detroit",
"fkVariableId": 7039,
"primaryVariableName": "Candy & Chewing Gum",
"variableContents": "INDEX",
"variableValue": 68.06,
"isSelected": false,
"isActiveMbuCmn": true,
"isActiveMbuHdr": true,
"isActiveMbuDtl": true,
"isUsedInCbx": true,
"isBought": false,
"var1Name": "Candy & Chewing Gum",
"var1Contents": "INDEX",
"var1Value": "68",
"var2Name": "Toys, Games, and Hobbies",
"var2Contents": "INDEX",
"var2Value": "78",
"var3Name": "Casual Dining: Olive Garden",
"var3Contents": "INDEX",
"var3Value": "91"
}]
};
$(document).ready(function() {
$("#jqGrid").jqGrid({
datatype: function(postdata) {
$('#' + 'load_' + 'jqGrid').show();
var json = mainGrid;
for (var i = 0; i < json.rows.length; i++) {
json.rows[i].id = $.jgrid.randId();
json.rows[i].siteNameDisp = json.rows[i].siteName + ' - ' +
json.rows[i].siteAddress + ', ' +
json.rows[i].siteCitySt + ', ' +
json.rows[i].siteZip;
}
var thegrid = $('#jqGrid')[0];
thegrid.addJSONData(json);
$('#' + 'load_' + 'jqGrid').hide();
},
page: 1,
colModel: [{
label: 'ID',
name: 'id',
width: 50,
hidden: true,
key: true,
editable: true,
sortable: false,
editrules: {
edithidden: true
}
}, {
label: 'Site Id',
name: 'siteId',
width: 100,
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
}, {
label: 'Site',
name: 'siteNameDisp',
width: 250,
sortable: false
}, {
label: 'Trade Area Households',
name: 'taHouseholds',
width: 100,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
}, {
label: 'Trade Area Distribution',
name: 'taDistribution',
width: 85,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
}, {
label: 'Total Distribution',
name: 'distribution',
width: 85,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
}, {
label: 'CPM',
name: 'avgCpm',
width: 50,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: "$ "
},
align: 'right'
}, {
label: 'Investment',
name: 'investment',
width: 75,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: "$ "
},
align: 'right'
}, {
label: 'Coverage %',
name: 'coverage',
width: 70,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
suffix: " %"
},
align: 'right'
}, {
label: 'Product',
name: 'productCd',
width: 150,
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
}],
viewrecords: true,
width: 800,
shrinkToFit: false,
//height: '100%',
rowNum: 20,
pager: "#jqGridPager",
subGrid: true,
subGridRowExpanded: function(subgrid_id, parentRowId) {
var grid = $("#jqGrid");
var row = grid.getRowData(parentRowId);
showDetail(subgrid_id, parentRowId);
}
});
});
function showDetail(subgrid_id, parentRowId) {
var lastSelection;
var parentGridId = 'jqGrid';
var grid = $('#' + parentGridId);
var row = grid.getRowData(parentRowId);
var siteId = row.siteId;
var productCode = row.productCd;
var subgrid_table_id = subgrid_id + "_table";
var subgrid_pager_id = subgrid_id + "_pager";
$("#" + subgrid_id).html("<table id=\'" + subgrid_table_id + "' class='scroll'></table>" +
"<div id=\'" + subgrid_pager_id + "\'></div>");
$("#" + subgrid_table_id).jqGrid({
datatype: function(postdata) {
$('#' + 'load_' + subgrid_table_id).show();
var json = subGrid;
for (var i = 0; i < json.rows.length; i++) {
json.rows[i].taDistribution = json.rows[i].distribution;
json.rows[i].parentGridId = parentGridId;
json.rows[i].parentRowId = parentRowId;
}
var thegrid = $("#" + subgrid_table_id)[0];
thegrid.addJSONData(json);
$('#' + 'load_' + subgrid_table_id).hide();
},
editurl: 'clientArray',
page: 1,
colModel: [{
label: 'Site ID',
name: 'siteId',
width: 75,
//key: true, // The key field must be visible in order for the row to go into edit mode.
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
}, {
label: 'Common MBU ID',
name: 'commonMbuId',
width: 75,
//key: true, // The key field must be visible in order for the row to go into edit mode.
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
}, {
label: 'Parent Grid ID',
name: 'parentGridId',
width: 75,
hidden: true
},
{
label: 'Parent Row ID',
name: 'parentRowId',
width: 75,
hidden: true
}, {
label: 'Geography',
name: 'geocode',
width: 90,
sortable: true,
key: true
}, {
label: 'City, State',
name: 'cityName',
width: 115,
sortable: true
}, {
label: 'TA HHs',
name: 'taHouseholds',
width: 50,
sortable: true,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
}, {
label: 'Distr Qty',
name: 'distribution',
width: 50,
sortable: true,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
}, {
label: 'TA Distr',
name: 'taDistribution',
width: 50,
sortable: false,
hidden: true,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
},
{
label: 'CPM',
name: 'cpm',
width: 50,
sortable: true,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: ""
},
align: 'right'
},
{
label: 'Investment',
name: 'investment',
width: 90,
sortable: true,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: "$ "
},
align: 'right'
},
{
label: 'Coverage %',
name: 'taCoverage',
width: 85,
sortable: true,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
suffix: " %"
},
align: 'right'
},
{
label: 'Distance',
name: 'distance',
width: 75,
sortable: true,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 2
},
align: 'right'
},
{
label: 'Coverage Description',
name: 'coverageDescDisplay',
width: 90,
sortable: true
},
{
label: 'IH Date',
name: 'ihDate',
width: 60,
sortable: true,
//formatter: dateFormatter,
align: 'center'
},
{
label: 'IH Day',
name: 'ihDay',
width: 60,
sortable: true,
align: 'center'
},
{
label: 'Pricing Market',
name: 'pricingMarket',
width: 115,
sortable: true
}, {
label: ' ',
name: 'variableValue',
width: 90,
sortable: true,
hidden: false,
align: 'right'
},
// Variable 1
{
label: ' ',
name: 'var1Value',
width: 90,
sortable: true,
hidden: false,
align: 'right'
},
// Variable 2
{
label: ' ',
name: 'var2Value',
width: 90,
sortable: true,
hidden: false,
align: 'right'
},
// Variable 3
{
label: ' ',
name: 'var3Value',
width: 90,
sortable: true,
hidden: false,
align: 'right'
}
],
viewrecords: true,
//height: '100%',
shrinkToFit: false,
width: 1400,
rowNum: 20,
pager: "#" + subgrid_pager_id
});
}
这里是 JS Fiddle 的链接：
https://jsfiddle.net/msobczak/bebuyk67/3/
希望以下图片对您有所帮助。
- 初始网格渲染
- 向右滚动子网格后的网格显示。请注意父网格数据列如何不再与标题列同步。事实上，父网格列根本没有滚动。
【问题讨论】：
-
仅供参考：我使用最新的 jqgrid 版本 5.0.2 尝试了我的代码，但它有同样的问题。
-
我尝试使用您的 JSFiddle 演示重现该问题，但我不能。之后我发现你使用了我 fork 的最新源 free jqGrid 而不是 Guriddio jqGrid JS 5.0.2。只有在将我的免费 jqGrid 替换为 Guriddo jqGrid JS 之后，我才能得到演示 jsfiddle.net/OlegKi/bebuyk67/4，这是错误的。因此，它表明 Guriddo jqGrid JS 版本 4.8.2 和 5.0.2 可能具有相同的错误。使用免费的 jqGrid 可能更简单？
-
在我的 jsFiddle 中，使用免费的 jQgrid，我什至没有得到子网格的滚动条。这是为什么呢？