0

jQuery レイアウトで jqGrid を実装している間、レイアウトのスプリッターがドラッグされたときに jqGrid のサイズが変更されません。jqgrid の幅を動的に設定するための解決策は、ウィンドウ オブジェクトのサイズ変更イベントとのバインディングを使用することです。ただし、私の場合は 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;
}
4

1 に答える 1

0

レイアウトの初期化中に 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');
};

例は修正で更新されます。次のリンクが非常に役立つことがわかりました:このリンクを確認してください

于 2014-07-01T07:15:00.710 に答える