Я заметил, что только комбинация всех 3-х ответов дана, то есть ответ Джона Джона ,
ответ Бхаргава и
Ответ Молсона помог мне добиться реального автоматического изменения размера.
Итак, я создал некоторый код, который использует все преимущества, см. Фрагмент ниже. Я также улучшил его, чтобы вы могли передавать один объект сетки или массив сеток для изменения размера.
Если вы попробуете это, убедитесь, что вы
- нажмите Фрагмент кода запуска и
- затем нажмите «Полная страница» кнопку ссылки в верхнем правом углу.
Измените размер окна и посмотрите, как сетки меняют свой размер, и автоматически выровняйте:
// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
// pass one single grid, or an array of grids
function resizeGrid(jqGridObj) {
var $gridArray = Array.isArray(jqGridObj) ? jqGridObj : [jqGridObj];
for(let i=0; i<$gridArray.length; i++) {
var $grid=$gridArray[i],
newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
}
};
// template for the 2 grids
function createGrid(gridName, gridData) {
var gridObj=$("#"+gridName); gridObj.jqGrid({
autowidth: true, height: 45,
colNames: ['First name', 'Last name', 'Updated?'],
colModel: [{name: "firstName"}, {name: "lastName"}, {name: "updated"}],
data: gridData,
loadComplete: function() {
// resize on load
resizeGrid(gridObj);
}
});
return gridObj;
}
// instantiate Grid1
var data1 = [
{ id: 10, firstName: "Jane", lastName: "Doe", updated: "no"},
{ id: 20, firstName: "Justin", lastName: "Time", updated: "no" }
];
var gridObj1=createGrid("grid1", data1);
// instantiate Grid2
var data2 = [
{ id: 10, firstName: "Jane", lastName: "Smith", updated: "no"},
{ id: 20, firstName: "Obi-Wan", lastName: "Kenobi", updated: "no" }
];
var gridObj2=createGrid("grid2", data2);
function debounce(fn, delay) {
delay || (delay = 200);
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
function throttle(fn, threshhold, scope) {
threshhold || (threshhold = 200);
var last,
deferTimer;
return function () {
var context = scope || this;
var now = +new Date,
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
}
// change size with window for both grids
jQuery(window).resize(throttle(function(){
resizeGrid([gridObj1, gridObj2]);
}));
});
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Resizing jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<table id="grid1"></table>
<br/>
<table id="grid2"></table>
Примечание: Хотя этот пример прост, если у вас есть более сложные jqGrids, вам потребуется регулирование или подавление (2 функции throttle и debounce взяты оттуда), иначе событие изменения размера может быть очень медленным. Перейдите по ссылке, чтобы узнать больше об этом. Я предпочитаю регулирование в этом случае, потому что оно выглядит более плавным, но я включил обе функции, чтобы вы могли использовать их при необходимости в своем коде.
В моем реальном коде я нуждался в регулировании, иначе изменение размера становилось слишком медленным. Фрагмент кода уже включает обработчик удушения с порогом по умолчанию 200 мс. Вы можете поэкспериментировать с этим, например, если вы замените throttle на debounce во фрагменте кода, т.е.
jQuery(window).resize(debounce(function(){
resizeGrid([gridObj1, gridObj2]);
}));