Змінити розмір jqGrid при зміні розміру браузера?


Відповіді:


69

Я використовую це у виробництві вже деякий час без будь-яких скарг (може знадобитися трохи налаштувань, щоб виглядати прямо на вашому сайті .. наприклад, віднімаючи ширину бічної панелі тощо)

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

Також дуже корисно в цій ситуації: другий параметр для setGridWidth - це "зменшити". stackoverflow.com/questions/7745009/…
Джим

Стівене, ти бачив рішення jmav? Це здається найкращим, але я хотів побачити, як ви протиставили його такому підходу
IcedDante

53

Як наступне:

Попередній код, показаний у цьому дописі, врешті-решт було відмовлено, оскільки він був ненадійним. Зараз я використовую таку функцію 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
Якщо вам потрібно підтримати IE, ви можете зменшити частоту зміни розміру за допомогою таймерів.
fforw

Хочете докладно розробити? У мене були проблеми з IE, коли викликалася подія зміни розміру без зміни ширини сітки, що призвело до дивної поведінки на самій сітці. Ось чому код враховує поріг на кроці 2.
Джастін Етьє,

Що робити, якщо я хочу змінити css для форми додавання / редагування jqgrid?
Бхавік Амбані,

36

Автозміна розміру:

Для 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);
                });
            }
        }

Ну, я можу підтвердити, що версія 3.5+ вище чудово працює з jqGrid 4.4.1 на IE9, але з FireFox 16 на 17 таблиця зростає дещо ширшою кожного разу, коли я регулюю ширину браузера.
MattSlay

Можливо, у вас проблеми з кордонами, визначеними в css - я мав.
jmav

Ймовірно, ви захочете передати true як другий параметр у вашому виклику setGridWidth () в останніх версіях jqGrid. Якщо ви цього не зробите, стовпці у вашій таблиці не змінюються, коли таблиця змінює розмір. тобто$(this).setGridWidth(gridParentWidth, true);
Джош Шумахер

8

здається, це добре працює для мене

$(window).bind('resize', function() {
    jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');

Дякуємо за рішення, але воно не працювало належним чином, як би змінює цілий div, але не застосовуйте заголовок. :(
Vikas Gupta

Чому у вашому прикладі є -30?
Василь Попов

я не впевнений. Це було 5 років тому :(
Даррен Катон

7

Я використовую 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"
    }
});

// Інші сітки, визначені нижче ...


5

Якщо ти:

  • є 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;
}

Ось демонстрація


4

Позичивши код з вашого посилання, ви можете спробувати щось подібне:

$(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% ширини, вона повинна автоматично розширюватися, коли розширюється контейнер, за винятком випадків, коли в плагіні, який ви використовуєте, є деякі тонкощі, про які я не знаю.


Дякуємо за підказку! Виявляється, я викликав код зміни розміру з події GridComplete - з якоїсь причини це не працює в IE. У кожному разі, я виділив код зміни розміру в окрему функцію і викликаю його як у функції зміни розміру, так і після створення сітки. Знову дякую!
Джастін Етьє

Я вважаю, це не працює при зміні розміру вікна в IE 8. Це відбувається, коли ви оновлюєте сторінку.
SoftwareSavant

3

Основна відповідь спрацювала для мене, але додаток надзвичайно не реагував на 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);
});

Здається, було б складно змусити таймер працювати належним чином. Чи можете ви, будь ласка, поглянути на мою оновлену відповідь і побачити, чи все ще вам потрібен таймер?
Джастін Етьє

1
Щойно порівняв усіх 3. Твоє, безумовно, покращення в порівнянні зі рішенням Стефенса, але зміна розміру вікна все ще досить різка. З таймером зміна розміру є плавною, доки подія не спрацює, тому потрібно трохи пошарпатись, щоб правильно встановити тривалість синхронізації. Таймер трохи незграбний, але я думаю, що він дає найкращі результати в підсумку.
Woggles

редагувати: Stephens sln чудово працює на іншій моїй сторінці ... ця сторінка почала боротися лише після того, як я додав до неї купу інших елементів керування jQueryUI.
Woggles

Це дуже тупе запитання. Але я повний NOOB у Jquery, тому, будь ласка, дуже прощайте, але куди ми розміщуємо всі ці функції? Усередині Jquery (документ) .ready (function () {} чи ми стирчаємо? Просто цікаво, також, звідки береться $ (вікно) та ширина?
SoftwareSavant

@DmainEvent, я помістив $ (window) .bind в $ (Document) .ready, а функції reszieTimer var і resizeGrids поза $ (Document) .ready. $ (window) - це елемент вікна, який вбудований в jquery, а .width () - це функція jquery, яка обчислює ширину елемента
продивляється

3

Привіт, ентузіасти переповнення стека. Мені сподобалось більшість відповідей, і я навіть проголосував за пару, але жодна з них не працювала для мене на IE 8 з якихось дивних причин ... Однак я натрапила на ці посилання ... Цей хлопець написав бібліотеку, яка, здається, робота. Включіть його у свої проекти в adittion до jquery UI, додайте ім'я вашої таблиці та div.

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

http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed


Я також отримую деяку дивну поведінку в IE8 з переглядом сумісності та без нього: / Моя сітка зменшується до половини розміру, який повинен бути ... дякую за посилання
woggles

1
autowidth: true

працював у мене ідеально дізналися звідси .


2
autowidthвідмінно працює при першому завантаженні сітки, але не змінює розмір сітки при зміні розміру браузера. Як ви впорались із цією проблемою, чи це не є для вас вимогою?
Джастін Етьє,

@Justin Ethier: ти маєш рацію. Я хотів, щоб він встановлювався при першому завантаженні сітки, а не при зміні розміру браузера. Вибачте, я неправильно прочитав питання. Я розумію, голос проти.
understack

1

Це працює ..

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?
});

0
<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.