使用内部 jqGrid 可调整大小的 JQuery UI

Question

我正在制作一个带有小部件的仪表板。可以使用 JQuery UI 插件调整小部件的大小，但只能调整其高度。宽度自动设置为父级的 100%，即屏幕的 50%。

小部件有标题和内容：

<div id="widget">
    <div id="header">ssss</div>
    <div id="content">
        <div id="grid-container">
            <table id="mygrid"></table>
        </div>
    </div>
</div>

JS

$(function () {
    var colNames = [
        "One", "Two", "Three", "Four"];
    var colModel = [];
    for (index = 0; index < colNames.length; ++index) {
        colModel.push({
            name: "col" + index,
            id: "col" + index,
            width: 75
        });
    }
    console.log($('#grid-container').height());
    $('#mygrid').jqGrid({
        datatype: 'local',
        data: getData(),
        height: $('#grid-container').height(),
        autowidth: true,
        shrinkToFit: false,
        colNames: colNames,
        colModel: colModel,
        rownumbers: true,
        rownumWidth: 10,
        scroll: 1
    });

    $('#widget').resizable({
        handles: "s",
        distance: 5,
        alsoResize: "#content",
        resize: function () {
            var $grid = $('#mygrid'),
                $gbox = $grid.find(".ui-jqgrid"),
                outerHeight = $gbox.height() - $grid.jqGrid('getGridParam', 'height') + 24;
            $grid.jqGrid('setGridHeight', $('#grid-container').height() - outerHeight);
        },
        stop: function (event, ui) {
            //that._trigger('resize');
        }
    });
});

function getData() {
    //fake data from http://www.ok-soft-gmbh.com/jqGrid/T.J.Crowder.htm
    //thx Oleg  
    [...]
}

在这里拉小提琴：

http://jsfiddle.net/techunter/AHWbv/

问题

在我的网站上，调整大小时会出现延迟和跳跃。小提琴为我重现了这个问题。如果您有任何建议或替代解决方案，我会在这里苦苦挣扎。

如何在调整大小时使用 jqgrid 填充父级来调整小部件 HEIGHT 的大小？

Answer 1

您可以调用调整大小函数或绑定到onresize 事件：

    //detect if the screen is resized and if so adjust the grids
    window.onresize = function () { resizePageGrids() }

然后

function resizePageGrids() {        
    var w = $('#widgetContainer').width() - 10;
    $('#gridName').jqGrid('setGridWidth', w, true);
}

我在- 10 中添加了滚动条和网格上的小边距。