브라우저 크기를 조정할 때 jqGrid 크기를 조정합니까?

브라우저 창 크기를 조정할 때 jqGrid의 크기를 조정할 수있는 방법 이 있습니까? 여기에 설명 된 방법을 시도 했지만 해당 기술은 IE7에서 작동하지 않습니다.

지금은 불만없이 프로덕션에서이 기능을 사용하고 있습니다 (예 : 사이드 바의 너비 빼기 등).

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

후속 조치 :

이 게시물에 표시된 이전 코드는 신뢰할 수 없기 때문에 결국 포기되었습니다. 이제 jqGrid 설명서에서 권장하는대로 다음 API 함수를 사용하여 그리드 크기를 조정하고 있습니다.

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>

자동 크기 조정 :

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

// 아래에 정의 된 기타 그리드 ...

만약 너라면:

• 있다 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;
}

다음은 데모입니다.

링크의 코드에서 빌리면 다음과 같이 시도 할 수 있습니다.

$(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 % 너비로 설정된 경우 컨테이너가 확장 될 때 자동으로 확장되어야하지만 사용중인 플러그인에 대해 제가 알지 못하는 복잡한 부분이없는 한.

주요 답변은 저에게 효과적 이었지만 IE에서 앱이 매우 응답하지 않게 만들었으므로 제안 된대로 타이머를 사용했습니다. 코드는 다음과 같습니다 ( $(#contentColumn)JQGrid가있는 div).

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

var resizeTimer;

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

스택 오버플로 애호가 여러분, 안녕하세요. 나는 대부분의 답변을 즐겼고 몇 가지를 찬성했지만 이상한 이유로 IE 8에서 나를 위해 일한 사람은 아무도 없었습니다.하지만이 링크를 만났습니다 ...이 사람은 다음과 같은 라이브러리를 작성했습니다. 작업. jquery UI에 추가하여 프로젝트에 포함하고 테이블 이름과 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

나를 위해 완벽하게 작동했습니다. 여기 에서 배웠습니다 .

작동합니다 ..

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>