Thay đổi kích thước jqGrid khi trình duyệt được thay đổi kích thước?

Có cách nào để thay đổi kích thước jqGrid khi cửa sổ trình duyệt được thay đổi kích thước không? Tôi đã thử phương pháp được mô tả ở đây nhưng kỹ thuật đó không hoạt động trong IE7.

Đã sử dụng tính năng này trong sản xuất được một thời gian mà không có bất kỳ phàn nàn nào (Có thể thực hiện một số điều chỉnh để giao diện phù hợp trên trang web của bạn .. ví dụ: trừ chiều rộng của thanh bên, v.v.)

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

Như một sự theo dõi:

Mã trước đó được hiển thị trong bài đăng này cuối cùng đã bị bỏ qua vì nó không đáng tin cậy. Bây giờ tôi đang sử dụng hàm API sau để thay đổi kích thước lưới, theo đề xuất của tài liệu jqGrid:

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

Để thực hiện thay đổi kích thước thực tế, một hàm thực hiện logic sau được liên kết với sự kiện thay đổi kích thước của cửa sổ:

• Tính chiều rộng của lưới bằng cách sử dụng clientWidth của cha mẹ của nó và (nếu không có) thuộc tính offsetWidth của nó.

• Thực hiện kiểm tra độ tỉnh táo để đảm bảo chiều rộng đã thay đổi nhiều hơn x pixel (để khắc phục một số vấn đề dành riêng cho ứng dụng)

• Cuối cùng, sử dụng setGridWidth () để thay đổi chiều rộng của lưới

Đây là mã ví dụ để xử lý việc thay đổi kích thước:

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');

Và ví dụ đánh dấu:

<div id="grid_container">
    <table id="grid"></table>
    <div id="grid_pgr"></div>
</div>

Tự động thay đổi kích thước:

Đối với 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);
            });
        }

Đối với 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);
                });
            }
        }

điều này dường như đang hoạt động tốt đối với tôi

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

Tôi đang sử dụng 960.gs cho bố cục nên giải pháp của tôi như sau:

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

// Các lưới khác được xác định bên dưới ...

Nếu bạn:

• có shrinkToFit: false(nghĩa là cột có chiều rộng cố định)
• có autowidth: true
• không quan tâm đến chiều cao chất lỏng
• có thanh cuộn ngang

Bạn có thể tạo lưới với chiều rộng linh hoạt với các kiểu sau:

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

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

Đây là một bản demo

Mượn từ mã tại liên kết của bạn, bạn có thể thử một cái gì đó như sau:

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

Bằng cách này, bạn đang liên kết trực tiếp với sự kiện window.onresize, sự kiện này thực sự giống như những gì bạn muốn từ câu hỏi của mình.

Nếu lưới của bạn được đặt thành 100% chiều rộng, mặc dù lưới sẽ tự động mở rộng khi vùng chứa của nó mở rộng, trừ khi có một số phức tạp đối với plugin bạn đang sử dụng mà tôi không biết.

Câu trả lời chính phù hợp với tôi nhưng làm cho ứng dụng không phản hồi trong IE, vì vậy tôi đã sử dụng bộ hẹn giờ theo đề xuất. Mã trông giống như sau ( $(#contentColumn)là div mà JQGrid nằm trong đó):

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

var resizeTimer;

$(window).bind('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
});

Xin chào những người đam mê tràn Stack. Tôi thích hầu hết các câu trả lời, và tôi thậm chí đã bầu chọn một vài câu trả lời, nhưng không có câu trả lời nào phù hợp với tôi trên IE 8 vì một số lý do kỳ lạ ... Tuy nhiên, tôi đã gặp phải những liên kết này ... Anh chàng này đã viết một thư viện công việc. Đưa nó vào các dự án của bạn trong quảng cáo giao diện người dùng jquery, đưa vào tên bảng của bạn và 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

autowidth: true

đã làm việc hoàn hảo cho tôi. học được từ đây .

Những công việc này..

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>