在 jqGrid 的子网格上，右边框不可见

Question

我使用的是免费的 jqGrid 版本 4.15.0，我在主网格中有一个子网格，子网格的右边框不可见。

jQuery版本：1.12.4
jQuery UI 版本：1.11.4
fontawesome 版本：4.7.0

查看我的 fiddle 或以下代码片段：https://jsfiddle.net/eL7h9e8z/
您需要单击 + 号才能显示子网格。

var maingriddata = [{
  Column1: "Test1",
  Column2: "Test1",
  ShowSubGrid: true
}, {
  Column1: "Test2",
  Column2: "Test2",
  ShowSubGrid: false
}];

var subgridData = [{
  SubCol1: 'SubCol1',
  SubCol2: 'SubCol2',
  SubCol3: 'SubCol3'
}, {
  SubCol1: 'SubCol11',
  SubCol2: 'SubCol22',
  SubCol3: 'SubCol33'
}];

$(function() {
  "use strict";
  var $grid = $("#policyGrid");

  $grid.jqGrid({
      datatype: "local",
      data: maingriddata,
      colNames: ["Column1", "Column2", "", ""],
      colModel: [{
        name: "Column1",
        width: 50
      }, {
        name: "Column2"
      }, {
        name: "viewsubgrid",
        align: "center",
        width: 21,
        formatter: function(cellvalue, options, rowObject) {
          if (rowObject.ShowSubGrid) {
            return "<span class='fa fa-fw fa-plus subgridIcon'></span>";
          } else {
            return "&nbsp;";
          }
        }
      }, {
        name: "ShowSubGrid",
        hidden: true
      }],
      cmTemplate: {
        sortable: false,
        resizable: false
      },
      iconSet: "fontAwesome",
      loadonce: true,
      altRows: true,
      caption: "",
      width: '100%',
      height: '100%',
      shrinkToFit: true,
      autowidth: true,
      height: 380,
      pgbuttons: false,
      pgtext: null,
      toppager: false,
      pager: true,
      rownumbers: false,
      threeStateSort: false,
      subGrid: true,
      subGridOptions: {
        hasSubgrid: function(options) {
          return options.data.ShowSubGrid;
        },
        reloadOnExpand: false,
        openicon: "ui-helper-hidden"
      },
      subGridRowExpanded: function(subgridDivId, rowId) {
        var subgrid_table_id, pager_id;
        subgrid_table_id = subgridDivId + "_t";
        pager_id = "p_" + subgrid_table_id;
        var $table = $("<table id='" + subgrid_table_id + "' class='scroll'></table>");
        $("#" + subgridDivId).append($table);
        $("#" + subgrid_table_id).jqGrid({
          datatype: "local",
          data: subgridData,
          colNames: ['Sub Col 1', 'Sub Col 2', 'Sub Col 3'],
          colModel: [{
            name: "SubCol1",
            width: 100,
            resizable: false
          }, {
            name: "SubCol2"
          }, {
            name: "SubCol3"
          }, ],
          cmTemplate: {
            sortable: false
          },
          rowNum: 0,
          pgbuttons: false,
          pgtext: null,
          sortable: false,
          toppager: false,
          viewrecords: true,
          pager: true,
          rownumbers: false,
          height: '80px',
          autoresizeOnLoad: true,
          idPrefix: subgridDivId + "_" + rowId + "_",
          loadComplete: function(data) {
            $("#" + subgrid_table_id).jqGrid("setGridHeight", '100%');
          },
          beforeSelectRow: function(rowid, e) {
            return false;
          }
        }).unbind("contextmenu");
        $("#" + subgrid_table_id).jqGrid('navGrid', {
          add: false,
          edit: false,
          del: false,
          refresh: false,
          search: false
        });
      },
      beforeSelectRow: function(rowid, e) {
        var iCol = $.jgrid.getCellIndex(e.target);
        if (iCol == $grid.jqGrid("getGridParam", "iColByName")['viewsubgrid']) {
          var $btn = $(e.target).closest("td").find('.subgridIcon');
          var $tr = $(e.target).closest("tr.jqgrow");
          if ($tr.find(">td.sgcollapsed").length > 0) {
            $(this).jqGrid("expandSubGridRow", rowid);
            $btn.removeClass('fa-plus').addClass('fa-minus');
          } else {
            $(this).jqGrid("collapseSubGridRow", rowid);
            $btn.removeClass('fa-minus').addClass('fa-plus');
          }
        }
        return false;
      }
    }).jqGrid("navGrid", {
      add: false,
      edit: false,
      del: false,
      refresh: false,
      search: false
    })
    .jqGrid("hideCol", "subgrid")
    .unbind("contextmenu");
});

.ui-helper-hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type='text/javascript'>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/jquery.jqgrid.src.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/css/ui.jqgrid.css" rel="stylesheet"/>

<div id="pnlGrid" style="margin-left: 10px; margin-right: 10px;width:700px;">
  <table id="policyGrid">
  </table>
</div>

Missing border image:

我注意到如果我（手动）减少 '.ui-jqgrid-hdiv','.ui-jqgrid-bdiv' & '.ui- jqgrid-pager' by 2px, border is visible.

有人有想法吗？

谢谢。

Answer 1

感谢您提供错误报告和重现问题的演示！

问题的原因是在网格作为子网格的情况下，在 .ui-jqgrid（网格的外部 div）上使用了错误的 box-sizing。所有 jqGrid 元素的 box-sizing 应该是 border-box，唯一的例外是 .ui-jqgrid，它应该是 content-box。可以通过添加以下附加 CSS 规则来解决此问题：

.subgrid-data > .tablediv > .ui-jqgrid {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.subgrid-data > .tablediv > .ui-jqgrid > .ui-jqgrid-view {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

第一条规则将 .ui-jqgrid 的 box-sizing 重置为 content-box，下一条规则将 [=21= 的 children 改回 border-box ].我在 GitHub too (see the commit).

上更新了 ui.jqgrid.css 的主要代码

演示 https://jsfiddle.net/OlegKi/eL7h9e8z/2/ 演示了更改的工作原理。我对您的代码进行了其他一些小改动以解决一些小问题。

在 jqGrid 的子网格上，右边框不可见

On subgrid of jqGrid, the right border is not visible

jqgrid

free-jqgrid