Размер jqGrid, когда браузер изменяется?

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

$(window).bind('resize', function() {
    $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');

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

для 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);
                });
            }
        }

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

$(window).bind('resize', function() {
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');

Я использую 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"
    }
});

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

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

$(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%');
    });
});

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

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

основной ответ работал для меня, но сделал приложение чрезвычайно невосприимчивым в 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);
});

Привет энтузиастов переполнения стека. Мне понравилось большинство ответов, и я даже проголосовал за пару, но ни один из них не работал для меня на 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

Если вы:

• есть 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;
}

вот демо

autowidth: true

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

это работает..

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?
});

<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>