Question

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

我的jsfiddle代码是：Example

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
});

当＆＃39;调整大小时＆＃39;触发事件设置jqgrid的宽度：

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

使用修复程序更新Example。我发现以下链接非常有用：Check this one

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

1 个答案: