jqGrid: как добавить горизонтальную панель инструментов

Question

jqGrid создан на веб-странице.Если ширина страницы уменьшается, крайние правые столбцы больше не доступны.Как добавить горизонтальную полосу прокрутки в jqGrid, чтобы при малой ширине страницы jqGrid можно было прокручивать горизонтально, чтобы обеспечить доступ ко всем столбцам?

Answer 1

Вы можете попробовать подобный подход, но в этом случае вы будете использовать полосы прокрутки сетки вместо переполнения div.

Идея состоит в том, чтобы изменить размер самой сетки, заставляя ее показывать полосы прокрутки, если ее будурыменьше, чем его содержание.Чтобы это работало правильно, столбцы должны иметь опцию fixed:true, в противном случае они сами изменят размер в соответствии с шириной сетки.

Объявите DOM следующим образом:

<div id="grid1container" style="width: 100%;">
    <table id="grid1"></table>
    <div id="grid1pager"></div>
</div>

Затем добавьте javascripкод на страницу:

$(window).resize(function () { ResizeGrid1() });
function ResizeGrid1() {
    $('#grid1container').height($(window).height() - 55);

    $('#grid1').jqGrid()
        .setGridWidth($('#grid1container').width() - 2)
        .setGridHeight($('#grid1container').height());
}

Здесь я также манипулирую высотой сетки, если вы не хотите, просто удалите строку setGridHeight.

Answer 2

Я нашел это решение, но оно не идеально, так как в FF4 окно перестает сообщать об изменении ширины ниже 535 пикселей ... не могу понять, почему.

Моя идея заключалась в том, чтобы обернуть сетку внутри DIV и установить для нее переполнение: auto; ширина: 100%

<div id="grid1container" style="width: 100%; overflow: auto;">
    <table id="grid1"></table>
    <div id="grid1pager"></div>
</div>