jqgrid：当子网格比父网格

时间：2016-08-29 15:58:41

标签： jquery jqgrid

我目前正在使用jqgrid 5.0.2我有一个固定宽度为800像素的父网格，以及一个更大的子网格。我需要做的是显示子网格的所有列，而不需要水平滚动条。

最初显示在子网格中的列只是那些在父网格宽度内的列。即使我将父网格的宽度设置为应显示子网格列的更宽的范围，父网格宽度右侧的列也需要使用水平滚动条。

在下面的示例中，我将父网格的宽度设置为1200像素。但是，我仍然需要使用子网格的水平滚动条来到达超过父网格宽度的列。

enter image description here

这是我正在使用的代码：

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: 1200,
    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,
    autowidth: true,
    rowNum: 20,
    pager: "#" + subgrid_pager_id
  });

}

以下是jsFiddle中运行代码的链接：

https://jsfiddle.net/msobczak/3yar2vr1/8/

更新

我修改了jsFiddle以包含以下语句来调整父网格中的一个列的大小，但没有任何变化：

grid.jqGrid('setColProp','coverage',{width:diff});
grid.jqGrid('setColProp','coverage',{widthOrg:diff});

https://jsfiddle.net/msobczak/3yar2vr1/9/

1 个答案:

答案 0 :(得分：0)

将在主网格的单元格内创建子网格。因此，应增加主栅格的宽度以解决问题。我建议你增加最后一个可见列的width值来填充网格。您可以使用align: 'left'或使用classes更改列中文本的位置。您应该更改相应列标题的位置（在免费jqGrid中使用labelAlign: "left"并在其他jqGrid分支中使用setLabel。您将获得与您要求的网格/子网格相同的视图。

相关问题
最新问题