브라우저 크기가 조정 될 때 JQGRID 크기 조정?
https://stackoverflow.com/questions/875225
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian해결책 2
후속 조치로 :
이 게시물에 표시된 이전 코드는 신뢰할 수 없었기 때문에 결국 포기되었습니다. 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>
다른 팁
불만없이 한동안 제작에서 이것을 사용하고 있습니다 (사이트에서 바로보기 위해 약간의 조정이 필요할 수 있습니다. 예를 들어, 사이드 바의 너비를 빼기 등)
$(window).bind('resize', function() {
$("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
자동 크기 조정 :
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"
}
});
// 아래 정의 된 기타 그리드 ...
링크의 코드에서 빌리면 다음과 같은 것을 시도 할 수 있습니다.
$(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% 너비로 설정된 경우 컨테이너가 확장 될 때 자동으로 확장되어야합니다.
만약 너라면:
- 가지다
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;
}
주요 답변은 나에게 효과가 있었지만 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에 대한 Adittion에 프로젝트에 포함시키고, 테이블의 이름과 div를 던지십시오.
http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx
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>
