Изменить размер jqGrid при изменении размера браузера?

Ответы:

69

Некоторое время использовал это в производстве без каких-либо жалоб (может потребоваться некоторая настройка, чтобы правильно выглядеть на вашем сайте ... например, вычитание ширины боковой панели и т. Д.)

$(window).bind('resize', function() {
    $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
— Стивен Фюри
источник
Также очень полезно в этой ситуации: второй параметр setGridWidth - «сжатие». stackoverflow.com/questions/7745009/…
— Джим
Стивен, вы видели решение jmav? Это кажется лучшим, но я хотел увидеть, как вы противопоставили его этому подходу
— IcedDante
53

В качестве продолжения:

Предыдущий код, показанный в этом посте, в конечном итоге был заброшен, потому что он был ненадежным. Теперь я использую следующую функцию API для изменения размера сетки, как рекомендовано в документации jqGrid:

jQuery("#targetGrid").setGridWidth(width);

Для фактического изменения размера к событию изменения размера окна привязывается функция, реализующая следующую логику:

  • Вычислите ширину сетки, используя его родительский clientWidth и (если он недоступен) его атрибут offsetWidth.

  • Выполните проверку работоспособности, чтобы убедиться, что ширина изменилась более чем на x пикселей (чтобы обойти некоторые проблемы, связанные с приложением)

  • Наконец, используйте setGridWidth (), чтобы изменить ширину сетки.

Вот пример кода для изменения размера:

jQuery(window).bind('resize', function() {

    // Get width of parent container
    var width = jQuery(targetContainer).attr('clientWidth');
    if (width == null || width < 1){
        // For IE, revert to offsetWidth if necessary
        width = jQuery(targetContainer).attr('offsetWidth');
    }
    width = width - 2; // Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        // Only resize if new width exceeds a minimal threshold
        // Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery(targetGrid).width()) > 5)
    {
        jQuery(targetGrid).setGridWidth(width);
    }

}).trigger('resize');

И пример разметки:

<div id="grid_container">
    <table id="grid"></table>
    <div id="grid_pgr"></div>
</div>
— Джастин Этье
источник
2
Если вам нужна поддержка IE, вы можете ограничить частоту изменения размера с помощью таймеров.
— fforw,
Хотите уточнить? У меня были проблемы в IE, когда событие изменения размера было вызвано без изменения ширины сетки, что приводило к странному поведению в самой сетке. Вот почему код учитывает порог на шаге 2.
— Джастин Этье
Что, если я хочу изменить CSS для формы добавления / редактирования jqgrid?
— Бхавик Амбани
36

Автоматическое изменение размера:

Для jQgrid 3.5+

        if (grid = $('.ui-jqgrid-btable:visible')) {
            grid.each(function(index) {
                gridId = $(this).attr('id');
                gridParentWidth = $('#gbox_' + gridId).parent().width();
                $('#' + gridId).setGridWidth(gridParentWidth);
            });
        }

Для jQgrid 3.4.x:

       if (typeof $('table.scroll').setGridWidth == 'function') {
            $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div)
            if (gridObj) {

            } else {
                $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) {
                    grid = $(this).children('table.scroll');
                    gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight;
                    grid.setGridWidth(gridParentWidth, true);
                });
            }
        }
— jmav
источник
Что ж, я могу подтвердить, что приведенная выше версия 3.5+ отлично работает с jqGrid 4.4.1 в IE9, но с FireFox 16 и 17 таблица становится немного шире каждый раз, когда я регулирую ширину браузера.
— MattSlay
Возможно, у вас проблемы с границами, определенными в css - у меня были.
— jmav
Вы, вероятно, захотите передать true в качестве второго параметра в вызове setGridWidth () в последних версиях jqGrid. Если вы этого не сделаете, размер столбцов в таблице не изменится при изменении размера таблицы. ie$(this).setGridWidth(gridParentWidth, true);
— Джош Шумахер
8

это, кажется, хорошо работает для меня 

$(window).bind('resize', function() {
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
— Даррен Като
источник
Спасибо за решение, но оно не работает должным образом, как будто меняет весь div, но не применяется для заголовка. :(
— Викас Гупта
Почему в вашем примере -30?
— Васил Попов
Я не уверен. Это было 5 лет назад :(
— Darren Cato
7

Я использую 960.gs для разметки, поэтому мое решение выглядит следующим образом:

    $(window).bind(
        'resize',
        function() {
                    //  Grid ids we are using
            $("#demogr, #allergygr, #problemsgr, #diagnosesgr, #medicalhisgr").setGridWidth(
                    $(".grid_5").width());
            $("#clinteamgr, #procedgr").setGridWidth(
                    $(".grid_10").width());
        }).trigger('resize');
// Here we set a global options

jQuery.extend(jQuery.jgrid.defaults, {
    // altRows:true,
    autowidth : true,
    beforeSelectRow : function(rowid, e) { // disable row highlighting onclick
        return false;
    },
    datatype : "jsonstring",
    datastr : grdata,  //  JSON object generated by another function
    gridview : false,
    height : '100%',
    hoverrows : false,
    loadonce : true,
    sortable : false,
    jsonReader : {
        repeatitems : false
    }
});

// Demographics Grid

$("#demogr").jqGrid( {
    caption : "Demographics",
    colNames : [ 'Info', 'Data' ],
    colModel : [ {
        name : 'Info',
        width : "30%",
        sortable : false,
        jsonmap : 'ITEM'
    }, {
        name : 'Description',
        width : "70%",
        sortable : false,
        jsonmap : 'DESCRIPTION'
    } ],
    jsonReader : {
        root : "DEMOGRAPHICS",
        id : "DEMOID"
    }
});

// Другие сетки, определенные ниже ...

— Султан Шакир
источник
5

Если ты:

  • иметь shrinkToFit: false(столбцы средней фиксированной ширины)
  • иметь autowidth: true
  • не заботится о высоте жидкости
  • иметь горизонтальную полосу прокрутки

Вы можете создать сетку с плавной шириной со следующими стилями:

.ui-jqgrid {
  max-width: 100% !important;
  width: auto !important;
}

.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv {
   width: auto !important;
}

Вот демо

— Чинцу
источник
4

Заимствуя код по вашей ссылке, вы можете попробовать что-то вроде этого:

$(window).bind('resize', function() { 
    // resize the datagrid to fit the page properly:
    $('div.subject').children('div').each(function() {
        $(this).width('auto');
        $(this).find('table').width('100%');
    });
});

Таким образом, вы привязываетесь непосредственно к событию window.onresize, которое на самом деле выглядит так, как вы хотите от своего вопроса.

Если ваша сетка установлена ​​на 100% ширину, она должна автоматически расширяться при расширении контейнера, если в используемом вами плагине нет каких-либо сложностей, о которых я не знаю.

— Дэйв Л.
источник
Спасибо за совет! Оказывается, я вызвал код изменения размера из события GridComplete - по какой-то причине это не работает в IE. В любом случае, я выделил код изменения размера в отдельную функцию и вызвал его как в функции изменения размера, так и после создания сетки. Еще раз спасибо!
— Джастин Этье
Я считаю, что это не работает при изменении размера окна в IE 8. Однако это происходит, когда вы обновляете страницу.
— SoftwareSavant
3

Основной ответ сработал для меня, но из-за того, что приложение не отвечало в IE, я использовал таймер, как предлагалось. Код выглядит примерно так ( $(#contentColumn)это div, в котором находится JQGrid):

  function resizeGrids() {
    var reportObjectsGrid = $("#ReportObjectsGrid");
    reportObjectsGrid.setGridWidth($("#contentColumn").width());
};

var resizeTimer;

$(window).bind('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
});
— качается
источник
Похоже, что заставить таймер правильно работать будет непросто. Не могли бы вы взглянуть на мой обновленный ответ и узнать, нужен ли вам еще таймер?
— Джастин Этье
1
Просто сравнил их все 3. Ваше решение определенно лучше, чем решение Стивенса, но изменение размера окна все еще довольно резкое. С таймером изменение размера происходит плавно, пока событие не сработает, поэтому требуется немного возиться, чтобы получить правильную продолжительность запуска по времени. Таймер немного корявый, но я думаю, что в итоге он дает лучшие результаты.
— woggles 05
edit: Stephens sln отлично работает на другой моей странице ... эта страница начала бороться только после того, как я добавил к ней кучу других элементов управления jQueryUI.
— woggles 05
Это очень глупый вопрос. Но я полный NOOB в JQuery, поэтому прошу прощения, но где мы размещаем все эти функции? Внутри JQuery (document) .ready (function () {} или мы его высовываем? Просто интересно, откуда же $ (window) и width?
— SoftwareSavant
@DmainEvent, я помещаю $ (window) .bind в $ (Document) .ready, а функцию reszieTimer var и resizeGrids за пределами $ (Document) .ready. $ (window) - это элемент окна, встроенный в jquery, а .width () - это функция jquery, которая вычисляет ширину элемента
— woggles
3

Привет, энтузиасты переполнения стека. Мне понравилось большинство ответов, и я даже проголосовал за пару, но ни один из них не работал у меня в IE 8 по какой-то странной причине ... Я все же наткнулся на эти ссылки ... Этот парень написал библиотеку, которая, кажется, Работа. Включите его в свои проекты в дополнение к пользовательскому интерфейсу jquery, добавьте имя вашей таблицы и div.

http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx

http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed

— Программное обеспечениеSavant
источник
У меня также наблюдается странное поведение в IE8 с представлением о совместимости и без него: / Моя сетка
— изменяет
1 
autowidth: true

отлично работал у меня. узнал отсюда .

— недооценивать
источник
2
autowidthотлично работает при первой загрузке сетки, но не изменяет размер сетки при изменении размера браузера. Как вы справились с этой проблемой, или это не является для вас требованием?
— Джастин Этье,
@ Джастин Этье: ты прав. Я хотел установить его при первой загрузке сетки, а не при изменении размера браузера. Извините, я неправильно прочитал вопрос. Я понимаю голосование "против".
— understack
1

Это работает..

var $targetGrid = $("#myGridId");
$(window).resize(function () {
    var jqGridWrapperId = "#gbox_" + $targetGrid.attr('id') //here be dragons, this is     generated by jqGrid.
    $targetGrid.setGridWidth($(jqGridWrapperId).parent().width()); //perhaps add padding calculation here?
});
— Эрик
источник
0 
<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>
— Минимакс
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.