Jquery jqgrid:滚动子网格的问题
我目前正在使用jqgrid 4.8.2，我有一个固定宽度为800 px的父网格和一个更大的子网格。我已经设置了父栅格和子栅格，因此shrinkToFit为false。此时会出现子网格的滚动条，该滚动条工作正常。不幸的是，当我滚动子网格时，来自父网格的数据行也会滚动，但不会滚动父网格标题 我尝试使用JSFIDLE复制这种体验，但出于某种原因，jqgrid在那里的工作方式有所不同。我没有子网格的滚动条，即使我在服务器上运行的代码完全相同 以下是我使用的代码：Jquery jqgrid:滚动子网格的问题,jquery,jqgrid,Jquery,Jqgrid,我目前正在使用jqgrid 4.8.2，我有一个固定宽度为800 px的父网格和一个更大的子网格。我已经设置了父栅格和子栅格，因此shrinkToFit为false。此时会出现子网格的滚动条，该滚动条工作正常。不幸的是，当我滚动子网格时，来自父网格的数据行也会滚动，但不会滚动父网格标题 我尝试使用JSFIDLE复制这种体验，但出于某种原因，jqgrid在那里的工作方式有所不同。我没有子网格的滚动条，即使我在服务器上运行的代码完全相同 以下是我使用的代码： var mainGrid = { "
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
});
}
var mainGrid={
“总数”：1，
“页码”：1，
“页面大小”：20，
“记录”：1，
“行”：[{
“站点ID”：12516086，
“站点名称”：“底特律”，
“站点地址”：“1伍德沃德”，
“siteCitySt”：“密歇根州底特律市”，
“siteZip”：“48205”，
“productCd”：“ProductX”，
“产品名称”：“产品X”，
“finishedSize”：空，
“估计碎片重量”：0.125，
“vdpTypeCode”：空，
“taHouseholds”：1071689，
“taDistribution”：445139，
“分配”：445139，
“avgCpm”：32.32084084，
“投资”：19542.8，
“覆盖率”：41.54
}]
};
var子网格={
“总数”：1，
“页码”：1，
“页面大小”：20，
“记录”：2，
“行”：[{
“mediaPlanId”：3003，
“mbuHdrId”：4035986，
“mbuDtlId”：10442611，
“commonMbuId”：99731，
“ggId”：1244425，
“fkGeoProfileId”：15032061，
“fkSite”：12516086，
“wrapZoneId”：15049936，
“wrapZone”：“MI Detroit/高地公园/Hamtramck”，
“产品CD”：“INS_共享”，
“产品名称”：“插入-共享邮件”，
“wrapPagePosition”：空，
“finishedSize”：空，
“估计碎片重量”：0.125，
“vdpTypeCode”：空，
“地理编码”：“48205D1”，
“zip”：“48205”，
“atz”：“D1”，
“城市名称”：“密苏里州底特律”，
“住户”：2088，
“taHouseholds”：2088，
“分配”：2092，
“cpm”：0，
“投资”：0.0，
“总保险范围”：100.191570881221265369846743295019157088，
“taCoverage”：100.191570881222605369846743295019157088，
“距离”：0.62，
“CoverageDescrDisplay”：“Pcd”，
“Coverage描述”：“私人承运人交付”，
“ihDate”：146371200000，
“ihDay”：“M/T”，
“pricingMarket”：“MI DETROIT”，
“fkSdmId”：15075973，
“sdmName”：“MI Detroit”，
“fkVariableId”：7039，
“primaryVariableName”：“糖果和口香糖”，
“可变内容”：“索引”，
“可变值”：63.52，
“isSelected”：没错，
“isActiveMbuCmn”：正确，
“isActiveMbuHdr”：正确，
“isActiveMbuDtl”：没错，
“isUsedInCbx”：正确，
“是买来的”：没错，
“var1Name”：“糖果和口香糖”，
“var1内容”：“索引”，
“var1Value”：“64”，
“var2Name”：“玩具、游戏和爱好”，
“var2Contents”：“INDEX”，
“var2Value”：“74”，
“var3Name”：“休闲餐饮：橄榄园”，
“var3Contents”：“INDEX”，
“var3Value”：“83”
}, {
“mediaPlanId”：3003，
“mbuHdrId”：4035988，
“mbuDtlId”：10442613，
“commonMbuId”：99732，
“ggId”：1244426，
“fkGeoProfileId”：22973059，
“fkSite”：12516086，
“wrapZoneId”：15049936，
“wrapZone”：“MI Detroit/高地公园/Hamtramck”，
“产品CD”：“INS_共享”，
“产品名称”：“插入-共享邮件”，
“wrapPagePosition”：空，
“finishedSize”：空，
“估计碎片重量”：0.125，
“vdpTypeCode”：空，
“地理编码”：“48205G1”，
“zip”：“48205”，
“atz”：“G1”，
“城市名称”：“密苏里州底特律”，
“家庭”：1156，
“taHouseholds”：1156，
“分配”：1157，
“cpm”：0，
“投资”：0.0，
“总保险范围”：100.08650190311418685121107266435986159，
“taCoverage”：100.086505190311418685121107266435986159，
“距离”：0.74，
“CoverageDescrDisplay”：“Pcd”，
“Coverage描述”：“私人承运人交付”，
“ihDate”：146371200000，
“ihDay”：“M/T”，
“pricingMarket”：“MI DETROIT”，
“fkSdmId”：15075973，
“sdmName”：“MI Detroit”，
“fkVariableId”：7039，
“primaryVariableName”：“糖果和口香糖”，
“可变内容”：“索引”，
“可变值”：68.06，
“isSelected”：错误，
“isActiveMbuCmn”：正确，
“isActiveMbuHdr”：正确，
“isActiveMbuDtl”：没错，
“isUsedInCbx”：正确，
“是买来的”：假，
“var1Name”：“糖果和口香糖”，
“var1内容”：“索引”，
“var1Value”：“68”，
“var2Name”：“玩具、游戏和爱好”，
“var2Contents”：“INDEX”，
“var2Value”：“78”，
“var3Name”：“休闲餐饮：橄榄园”，
“var3Contents”：“INDEX”，
“var3Value”：“91”
}]
};
$（文档）.ready（函数（）{
$（“#jqGrid”）.jqGrid({
数据类型：函数（postdata）{
$（'#'+'加载'+'jqGrid'）.show（）；
var json=mainGrid；
for（var i=0；i