Tarayıcı yeniden boyutlandırıldığında jqGrid yeniden boyutlandırılsın mı?

Tarayıcı penceresi yeniden boyutlandırıldığında jqGrid'i yeniden boyutlandırmanın bir yolu var mı ? Burada açıklanan yöntemi denedim ancak bu teknik IE7'de çalışmıyor.

Bunu üretimde bir süredir herhangi bir şikayet olmadan kullanıyorum (Sitenize tam olarak bakmak için biraz ince ayar yapmak gerekebilir .. örneğin, bir kenar çubuğunun genişliğini çıkarmak, vb.)

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

Takip olarak:

Bu yazıda gösterilen önceki kod, güvenilmez olduğu için sonunda terk edildi. Şimdi, jqGrid belgelerinde önerildiği gibi ızgarayı yeniden boyutlandırmak için aşağıdaki API işlevini kullanıyorum:

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

Gerçek yeniden boyutlandırmayı yapmak için, aşağıdaki mantığı uygulayan bir işlev, pencerenin yeniden boyutlandırma olayına bağlıdır:

• Izgaranın genişliğini üst öğesinin clientWidth'ini ve (bu mevcut değilse) offsetWidth niteliğini kullanarak hesaplayın.

• Genişliğin x pikselden fazla değiştiğinden emin olmak için bir akıl sağlığı kontrolü yapın (uygulamaya özgü bazı sorunların üstesinden gelmek için)

• Son olarak, ızgaranın genişliğini değiştirmek için setGridWidth () kullanın

Yeniden boyutlandırmayı işlemek için örnek kod:

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

Ve örnek işaretleme:

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

Otomatik yeniden boyutlandırma:

JQgrid 3.5+ için

        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 için:

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

bu benim için güzel çalışıyor gibi görünüyor

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

Düzen için 960.gs kullanıyorum, bu yüzden çözümüm aşağıdaki gibi:

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

// Aşağıda tanımlanan diğer ızgaralar ...

Eğer sen:

• var shrinkToFit: false(sabit genişlikte sütunlar)
• Sahip olmak autowidth: true
• sıvı yüksekliği umrumda değil
• yatay kaydırma çubuğuna sahip

Aşağıdaki stillerle değişken genişlikte ızgara yapabilirsiniz:

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

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

İşte bir demo

Bağlantınızdaki koddan ödünç alarak şuna benzer bir şey deneyebilirsiniz:

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

Bu şekilde, aslında sorunuzdan istediğiniz gibi görünen window.onresize olayına doğrudan bağlanırsınız.

Izgaranız% 100 genişliğe ayarlıysa, kapsayıcı genişlediğinde otomatik olarak genişlemesi gerekse de, kullandığınız eklentide bilmediğim bazı karmaşıklıklar olmadıkça.

Ana cevap benim için çalıştı ancak uygulamayı IE'de son derece tepkisiz hale getirdi, bu yüzden önerildiği gibi bir zamanlayıcı kullandım. Kod şuna benzer ( $(#contentColumn)JQGrid'in bulunduğu div'dir):

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

var resizeTimer;

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

Merhaba Stack overflow meraklıları. Cevapların çoğundan hoşlandım ve hatta bir çifte yukarı oy verdim, ancak hiçbiri garip bir nedenle IE 8'de benim için çalışmadı ... Ancak bu bağlantılarla karşılaştım ... Bu adam, görünen bir kitaplık yazdı iş. Bunu jquery kullanıcı arayüzüne ek olarak projelerinize dahil edin, tablonuzun ve div'inizin adını yazın.

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

benim için mükemmel çalıştı. buradan öğrendim .

Bu çalışıyor..

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>