如何全局监听所有jqGrid的resizeStop事件以保存列头宽度？

方法1：重写jqGrid全局默认配置 #

直接修改$.jgrid.defaults中的resizeStop方法，让所有后续初始化的jqGrid自动继承这个全局逻辑，无需逐个绑定：

// 先保存原生resizeStop方法（避免覆盖原有自定义逻辑）
const originalResizeStop = $.jgrid.defaults.resizeStop;

// 重写全局resizeStop回调
$.jgrid.defaults.resizeStop = function(newWidth, index) {
    // 1. 获取当前触发事件的jqGrid实例
    const $grid = $(this);
    const gridId = $grid[0].id;
    
    // 2. 获取对应列的配置与列头元素
    const colModel = $grid.jqGrid('getGridParam', 'colModel');
    const colConfig = colModel[index];
    const $headerTh = $grid.find(`th[aria-describedby="${gridId}_${colConfig.name}"]`);
    
    // 3. 执行你的列宽保存逻辑（示例）
    console.log('触发resizeStop的列:', colConfig.name);
    console.log('列头元素:', $headerTh);
    console.log('新宽度:', newWidth);
    
    // 4. 调用原生resizeStop方法（如果存在自定义的局部逻辑）
    if (typeof originalResizeStop === 'function') {
        originalResizeStop.call(this, newWidth, index);
    }
};

这种方式一劳永逸，所有新创建的jqGrid都会自动触发全局逻辑，也不会影响单个网格自己定义的resizeStop（全局逻辑执行后会调用局部逻辑）。

方法2：利用jQuery事件委托监听自定义事件 #

如果不想修改jqGrid默认配置，可以在网格初始化后绑定基础resizeStop，触发全局自定义事件再统一监听：

// 给所有jqGrid绑定基础resizeStop，触发全局事件
$(document).on('gridComplete.jqGrid', function(e) {
    const $grid = $(e.target);
    // 避免重复绑定
    if (!$grid.data('globalResizeBound')) {
        $grid.jqGrid('setGridParam', {
            resizeStop: function(newWidth, index) {
                // 触发全局自定义事件
                $(document).trigger('jqGridGlobalResizeStop', [this, newWidth, index]);
                
                // 执行原局部resizeStop（如果有）
                const localResizeStop = $grid.data('localResizeStop');
                if (typeof localResizeStop === 'function') {
                    localResizeStop.call(this, newWidth, index);
                }
            }
        });
        $grid.data('globalResizeBound', true);
    }
});

// 全局监听自定义事件
$(document).on('jqGridGlobalResizeStop', function(e, grid, newWidth, index) {
    const $grid = $(grid);
    const gridId = grid.id;
    const colModel = $grid.jqGrid('getGridParam', 'colModel');
    const colConfig = colModel[index];
    const $headerTh = $grid.find(`th[aria-describedby="${gridId}_${colConfig.name}"]`);
    
    // 这里执行你的列宽保存逻辑
    console.log('全局捕获resizeStop:', colConfig.name, newWidth, $headerTh);
});

// 单个网格需要自定义局部resizeStop时，需先存到data中
// 示例：
$('#myGrid').jqGrid({
    // ...其他配置
    resizeStop: function(newWidth, index) {
        $(this).data('localResizeStop', this.resizeStop);
        // 你的局部逻辑
    }
});

这种方式更灵活，适合需要动态控制全局监听开关的场景。

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