如何控制移动端jqGrid的shrinkToFit属性适配不同屏幕尺寸

要实现屏幕宽度在320px-768px之间时shrinkToFit设为false，769px及以上时设为true，可以通过初始化时判断窗口宽度+监听窗口resize事件动态调整来完成，具体代码如下：

1. 初始化jqGrid时设置初始值 #

页面加载时先获取当前窗口宽度，直接把对应的值传给shrinkToFit：

const initWidth = $(window).width();
$("#yourGridId").jqGrid({
  // 你的其他jqGrid配置项
  shrinkToFit: initWidth >= 769,
  // 你的其他jqGrid配置项
});

2. 监听窗口大小变化动态调整 #

添加resize事件监听，根据当前宽度区间切换属性值，同时加入防抖逻辑避免频繁触发：

let resizeDebounceTimer;
$(window).on("resize", function() {
  clearTimeout(resizeDebounceTimer);
  resizeDebounceTimer = setTimeout(() => {
    const currentWidth = $(this).width();
    const $grid = $("#yourGridId");
    const currentShrinkVal = $grid.jqGrid("getGridParam", "shrinkToFit");

    // 320px < 宽度 < 768px：设置shrinkToFit为false
    if (currentWidth > 320 && currentWidth < 768) {
      if (currentShrinkVal) {
        $grid.jqGrid("setGridParam", { shrinkToFit: false }).trigger("reloadGrid");
      }
    } 
    // 宽度 >=769px：设置shrinkToFit为true
    else if (currentWidth >= 769) {
      if (!currentShrinkVal) {
        $grid.jqGrid("setGridParam", { shrinkToFit: true }).trigger("reloadGrid");
      }
    }
  }, 200); // 防抖延迟可根据需求调整
});

关键说明 #

• 判断当前shrinkToFit的现有值再修改，是为了避免重复调用reloadGrid，减少不必要的性能消耗；
• 防抖定时器能有效降低窗口 resize 时的触发频率，避免短时间内多次刷新表格；
• 记得把代码中的#yourGridId替换成你实际的jqGrid容器ID。

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