代码之家  ›  专栏  ›  技术社区  ›  Bugzee

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

  •  1
  • Bugzee  · 技术社区  · 9 年前

    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 :

    enter image description here

    有人有主意吗?

    谢谢

    1 回复  |  直到 9 年前
        1
  •  0
  •   Oleg    9 年前

    谢谢你的错误报告和演示,它再现了这个问题!

    box-sizing 在…上 .ui-jqgrid (电网的外部分区)如果电网作为子电网。这个 border-box 只有一个例外 .ui jqgrid ,应该是 content-box

    .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 到 内容框 边框框 适用于 .ui-jqgrid-view . 我更新了 ui.jqgrid.css 在…上 GitHub 太(参见 the commit ).

    https://jsfiddle.net/OlegKi/eL7h9e8z/2/

    推荐文章