jqgrid:滚动子网格问题 [英] jqgrid: issue with scrolling subgrid
本文介绍了jqgrid:滚动子网格问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我当前正在使用jqgrid 4.8.2，我有一个固定宽度为800 px的父网格和一个较大的子网格.我已经设置了父网格和子网格，以便rinkleToFit为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小提琴的链接:
https://jsfiddle.net/msobczak/bebuyk67/3/
希望以下图片会有所帮助.
- 初始网格渲染
- 将子网格向右滚动后显示网格.注意父网格数据列如何不再与标题列同步.实际上，父网格列根本没有滚动.
解决方案
首先，我必须说明该演示 Guriddio jqGrid JS 4.8.2或5.0.2.使用最新的Guriddio jqGrid JS的相应演示将为 https://jsfiddle.net/OlegKi/bebuyk67/4 /.
我在免费的jqGrid中进行了许多修复.我可以看到与该问题相关的更改之一是CSS规则
.ui-jqgrid tr.ui-subgrid > td {
overflow: hidden;
}
如果我将CSS规则添加到Guriddio jqGrid JS，则会得到 https://jsfiddle.net/OlegKi/bebuyk67/5/，它将子网格始终保留在父网格内，并且您报告的问题从不存在.
更新:如果要查看子网格中的水平滚动条，则应使用
来减小其宽度 $("#" + subgrid_table_id).jqGrid("setGridWidth", $("#" + subgrid_id).width());
，或者以更简单的方式，只需将子网格的显式宽度(width: 1400)替换为autowidth: true选项.参见演示 https://jsfiddle.net/OlegKi/bebuyk67/7/
I'm currently using jqgrid 4.8.2 I have a parent grid with a fixed width of 800 px, and a sub grid that is larger. I've set both the parent grid and the child grid so that shrinkToFit is false. A scroll bar for the sub grid appears and works properly. Unfortunately, when I scroll the sub grid, the data row from the parent grid scrolls as well, but not the parent grid header.
I tried to replicate this experience using jsFiddle, but for some reason the jqgrid works differently there. I don't get the scroll bar for the sub grid, even though the code I'm running on my server is exactly the same.
Here's the code I'm using:
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
});
}
And here's a link to the JS Fiddle:
https://jsfiddle.net/msobczak/bebuyk67/3/
Hopefully the following pictures will help.
- Initial grid rendering
- Grid display after scrolling the sub grid to the right. Notice how the parent grid data columns are no longer in sync with the header columns. In fact, the parent grid columns did not scroll at all.
解决方案
First of all I have to remark that the demo https://jsfiddle.net/msobczak/bebuyk67/3/, which you included in the text of your question uses my fork of jqGrid: free jqGrid and not commercial Guriddio jqGrid JS 4.8.2 or 5.0.2. The corresponding demo using the latest Guriddio jqGrid JS would be https://jsfiddle.net/OlegKi/bebuyk67/4/.
I made many fixes in free jqGrid. One from the changes, which I can see related to the problem, is the CSS rule
.ui-jqgrid tr.ui-subgrid > td {
overflow: hidden;
}
If I would add CSS rule to Guriddio jqGrid JS then I get https://jsfiddle.net/OlegKi/bebuyk67/5/, which hold subgrid always inside of the parent grid and the problem which you reported never exist.
UPDATED: If you want to see the horizontal scrollbar in the subgrid the you should reduce it's width by usage of
$("#" + subgrid_table_id).jqGrid("setGridWidth", $("#" + subgrid_id).width());
or, in more easy way, just by replacing explicit width (width: 1400) of subgrid to autowidth: true option. See the demo https://jsfiddle.net/OlegKi/bebuyk67/7/
这篇关于jqgrid:滚动子网格问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
