답변
지금은 불만없이 프로덕션에서이 기능을 사용하고 있습니다 (예 : 사이드 바의 너비 빼기 등).
$(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 % 너비로 설정된 경우 컨테이너가 확장 될 때 자동으로 확장되어야하지만 사용중인 플러그인에 대해 제가 알지 못하는 복잡한 부분이없는 한.
