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

【问题标题】：resize jqgrid when splitter of jquery layout is dragged拖动jquery布局的拆分器时调整jqgrid的大小
【发布时间】：2014-08-18 02:55:27
【问题描述】：

在使用 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>

$("#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;
}

【问题讨论】：

标签： javascript jquery jqgrid jquery-layout

【解决方案1】：

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

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

当触发 'resize' 事件时，设置 jqgrid 的宽度：

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

Example 已通过修复更新。我发现以下链接非常有用：Check this one

【讨论】：