javascript - 拖动jquery布局的拆分器时调整jqgrid的大小

Question

在使用 jQuery 布局实现 jqGrid 时，当拖动布局的拆分器时，jqGrid 不会调整大小。动态设置 jqgrid 宽度的解决方案是使用与 window 对象的 resize 事件绑定。但是对于我的情况，它在 div 中并且窗口对象宽度不受影响。请针对此问题提出解决方法。

我的 jsfiddle 代码是：示例

html

<div id="content">
    <div class="ui-layout-center">
        <div id="grid-content">
            <table id="grid"></table>
        </div>
    </div>
    <div class="ui-layout-west">West</div>
</div>

JS

$("#grid").jqGrid({
    datatype: "local",
    height: 330,
    colNames: ['Key', 'Value'],
    colModel: [{
        name: 'Key',
        index: 'Key'
    }, {
        name: 'Value',
        index: 'Value'
    }]
});

$('#content').layout({
    applyDefaultStyles: true
});

CSS

#content {
    height:400px;
}

Answer 1

在初始化布局时使用 onresize 事件。

 $('#content').layout({
  center: {
    resizable: true,
    onresize: resize,
    triggerEventsOnLoad: true  
  },
  applyDefaultStyles: true
});

当触发“调整大小”事件时，设置 jqgrid 的宽度：

function resize(pane, $Pane, paneState) {
    alert('on resize..');
    jQuery("#grid").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true');
};

该示例已使用修复程序进行更新。我发现以下链接非常有用：检查这个