브라우저 크기가 조정되면 jqGrid 크기 조정?

브라우저 크기가 조정되면 jqGrid 크기 조정?

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

한동안 아무런 불만 없이 이 제품을 생산에 사용해 왔습니다. (당신의 사이트를 제대로 보기 위해서는 약간의 수정이 필요할 수도 있습니다.예를 들어, 사이드바의 폭 빼기 등)

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

후속 조치로:

이 게시물에 표시된 이전 코드는 신뢰할 수 없어 결국 폐기되었습니다.저는 지금 jqGrid 설명서에서 권장하는 대로 다음 API 기능을 사용하여 그리드 크기를 조정하고 있습니다.

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

실제 크기 조정을 수행하려면 다음 논리를 구현하는 함수가 창의 크기 조정 이벤트에 바인딩됩니다.

• 부모의 클라이언트 Width와 (사용할 수 없는 경우) 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(mean 고정 너비 열)
• 갖고 있다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 외에 프로젝트에 포함시키고 테이블과 디브의 이름을 입력합니다.

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

http://code.google.com/p/codeincubator/source/browse/ #svn%2Fsample%2Fsteveharman%2FjQuery%2FjQuery.jqgrid.fluid%253Fstate%253D닫힘

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>

언급URL : https://stackoverflow.com/questions/875225/resize-jqgrid-when-browser-is-resized