Можно ли изменить размер jqGrid при изменении размера окна браузера? Я пробовал метод, описанный здесь, но этот метод не работает в IE7.
Изменение размера jqGrid при изменении размера браузера?
Ответ 1
В качестве продолжения:
Предыдущий код, показанный на этом посту, был в конечном итоге оставлен, потому что он был ненадежным. Теперь я использую следующую функцию API для изменения размера сетки, как рекомендовано в документации jqGrid:
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>
Ответ 2
Использование этого в производстве в течение некоторого времени теперь без каких-либо жалоб (может потребоваться некоторое изменение, чтобы посмотреть прямо на вашем сайте.. например, вычитая ширину боковой панели и т.д.)
$(window).bind('resize', function() {
$("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
Ответ 3
Автоматическое изменение размера:
Для 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);
});
}
}
Ответ 4
это, кажется, хорошо работает для меня
$(window).bind('resize', function() {
jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
Ответ 5
Я использую 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"
}
});
//Другие сеточки, определенные ниже...
Ответ 6
Заимствуя из кода по вашей ссылке, вы можете попробовать что-то вроде этого:
$(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% ширину, хотя она должна автоматически расширяться, когда ее контейнер расширяется, если только не будут какие-то сложности для используемого вами плагина, о котором я не знаю.
Ответ 7
Главный ответ сработал у меня, но сделал приложение крайне невосприимчивым к IE, поэтому я использовал таймер, как было предложено. Код выглядит примерно так ($(#contentColumn)
- это div, в котором находится JQGrid):
function resizeGrids() {
var reportObjectsGrid = $("#ReportObjectsGrid");
reportObjectsGrid.setGridWidth($("#contentColumn").width());
};
var resizeTimer;
$(window).bind('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeGrids, 60);
});
Ответ 8
Привет, энтузиасты. Мне понравилось большинство ответов, и я даже проголосовал за пару, но ни один из них не работал у меня в IE 8 по какой-то странной причине... Я все же столкнулся с этими ссылками... Этот парень написал библиотеку, которая, кажется, Работа. Включите его в свои проекты в adittion to jquery UI, введите имя вашей таблицы и div.
http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx
Ответ 9
Если вы:
- имеют
shrinkToFit: false
(средние столбцы с фиксированной шириной) - have
autowidth: true
- не заботятся о высоте жидкости
- имеют горизонтальную полосу прокрутки
Вы можете сделать сетку с шириной жидкости со следующими стилями:
.ui-jqgrid {
max-width: 100% !important;
width: auto !important;
}
.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv {
width: auto !important;
}
Ответ 10
autowidth: true
отлично работал у меня. узнал из здесь.
Ответ 11
Это работает.
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?
});
Ответ 12
<script>
$(document).ready(function(){
$(window).on('resize', function() {
jQuery("#grid").setGridWidth($('#fill').width(), false);
jQuery("#grid").setGridHeight($('#fill').height(),true);
}).trigger('resize');
});
</script>
Ответ 13
Попробуйте следующее:
width: null
shrinkToFit: true