Question

我目前正在使用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/

希望以下图片有所帮助。

初始网格渲染

向右滚动子网格后的网格显示。请注意父网格数据列如何不再与标题列同步。实际上，父网格列根本没有滚动。

Answer 1

首先，我要注意，您在问题文本中包含的演示https://jsfiddle.net/msobczak/bebuyk67/3/使用了我的jqGrid分支：free jqGrid和不是广告{ {3}} 4.8.2或5.0.2。使用最新的Guriddio jqGrid JS的相应演示将是Guriddio jqGrid JS。

我在免费的jqGrid中做了很多修复。我可以看到与问题相关的变化之一是CSS规则

.ui-jqgrid tr.ui-subgrid > td {
    overflow: hidden;
}

如果我要将CSS规则添加到Guriddio jqGrid JS，那么我得到https://jsfiddle.net/OlegKi/bebuyk67/4/，它始终将子网格保存在父网格中，并且您报告的问题从不存在。

更新：如果你想在子网格中看到水平滚动条，你应该通过使用

减少它的宽度

$("#" + subgrid_table_id).jqGrid("setGridWidth", $("#" + subgrid_id).width());

或者更简单的方法是将子网格的显式宽度（width: 1400）替换为autowidth: true选项。请参阅演示https://jsfiddle.net/OlegKi/bebuyk67/5/

jqgrid：滚动子网格问题

1 个答案: