.NET6中jqGrid自动高度下配置最小高度的问题

问题分析 #

你的两个方案未生效的原因：

• 方案一：计算逻辑错误，rowNum是每页最大显示数（你设的25），不是行高；records是总记录数，不是当前页记录数；且代码存在语法错误（return语句后多了逗号）。
• 方案二：If关键字大小写错误，且初始化阶段reccount（当前页记录数）还未加载数据，无法正确获取值；固定高度300px可能和实际行高不匹配，导致显示效果不符合预期。

正确实现方法 #

核心思路：在数据加载完成后，根据当前页实际记录数动态调整网格高度，保证至少预留3行的显示空间；记录数超过3行时自动适配高度，同时设置单页最大显示20条记录。

代码实现 #

<text>
  $('#@item.CurrencyName').jqGrid({
    url: 'GetAcctInfoWithPermission?currencyID=@item.CurrencyID&clientID=@Model.ClientID&perResult=@Model.FeeGroupPermission',
    jsonReader: {
      root: 'rows',
      page: 'page',
      total: 'total',
      records: 'records',
      repeatitems: false,
      cell: 'cell',
      id: 'id',
      userdata: 'userdata'
    },
    datatype: 'json',
    sortname: 'Account',
    gridview: true,
    altRows: true,
    autowidth: true,
    height: 'auto',
    sortable: true,
    loadonce: false,
    pager: '#pager-@item.CurrencyID',
    pagerpos: 'right',
    recordpos: 'left',
    viewrecords: true,
    rowNum: 20, // 设置单页最大显示20条记录
    rowList: [20, 50, 100], // 可选的每页显示数量选项
    loadComplete: function() {
      var $grid = $(this);
      var currentPageCount = $grid.jqGrid('getGridParam', 'reccount'); // 当前页实际记录数
      var singleRowHeight = $grid.jqGrid('getRowHeight'); // 动态获取单行高度
      // 计算3行所需总高度：单行高度*3 + 表头高度（默认约30px，可根据实际调整）
      var minGridHeight = singleRowHeight * 3 + 30;

      if (currentPageCount <= 3) {
        $grid.jqGrid('setGridHeight', minGridHeight);
      } else {
        $grid.jqGrid('setGridHeight', 'auto');
      }
    },
    // 其他配置项
    ....etc...
  });
</text>

关键细节说明 #

• reccount参数：获取当前页实际显示的记录数，而非总记录数records，确保高度判断逻辑准确。
• getRowHeight()方法：动态获取单行高度，避免固定数值导致的适配问题，适配不同样式下的行高。
• loadComplete事件：在数据完全加载完成后再调整高度，此时reccount已能获取到正确值，保证逻辑生效。
• 表头高度调整：如果你的网格表头高度和默认值不同，可以修改+30这个数值，比如实际表头高度为40px就改成+40。

备选简化方案（无需精确行高） #

如果不需要精确计算行高，可以直接设置固定最小高度，在loadComplete中判断调整：

loadComplete: function() {
  var currentPageCount = $(this).jqGrid('getGridParam', 'reccount');
  if (currentPageCount <= 3) {
    $(this).jqGrid('setGridHeight', 300);
  } else {
    $(this).jqGrid('setGridHeight', 'auto');
  }
}

内容的提问来源于stack exchange，提问作者user1372603