Сделать jqGrid заполнить его контейнер

Я использую плагин JQuery макета и плагин jqGrid в одном из моих проектов, и они прекрасно работают за небольшую проблему, кроме ...Сделать jqGrid заполнить его контейнер

Я хочу jqGrid, чтобы заполнить полностью панель (панель макета jQuery), которая содержит его. Изменение размера панели должно изменить размер jqGrid, закрытие панели должно скрыть jqGrid и т. Д.

Как jqGrid, так и jQuery Layout предоставляют обратные вызовы, но когда я их использую, макет страницы ломается ужасно.

У кого-нибудь есть опыт смешивания jqGrid с компоновкой jQuery?

источник

2010-05-27 Horacio

Я рекомендую вам прочитать resize-jqgrid-when-browser-is-resized, в котором обсуждаются несколько способов для изменения размеров вашей сетки.

источник

2010-05-27 14:12:21

Спасибо, это привело меня к нужному мне ответу. – Horacio

Добро пожаловать, рад помочь –

@ JustinEthier, как мы можем сделать это как жидкую сетку, например, твиттер-бутстрап-таблицу. пример здесь http://192.69.216.111/themes/preview/ace/tables.html –

Это мое текущее решение:

Сначала нужно создать функцию изменения размера, который вызывается в OnResize событие:

function resizeGrid(pane, $Pane, paneState) { 
    if(grid = $('.ui-jqgrid-btable:visible')) { 
    grid.each(function(index) { 
     var gridId = $(this).attr('id'); 
     $('#' + gridId).setGridWidth(paneState.innerWidth - 2); 
    }); 
    } 
}

Тогда в макете мы создали событие изменения размера, чтобы вызвать этот метод:

$('#mylayout_id').layout({ 
    center: { 
    closable: false, 
    resizable: false, 
    slidable: false, 
    onresize: resizeGrid, 
    triggerEventsOnLoad: true // resize the grin on load also 
    }, 
    west: { 
    fxName: "slide", 
    size: 250, 
    maxSize: 300 
    }, 
    east: { 
    fxName: "slide", 
    size: 250, 
    maxSize: 300 
    } 
});

С этим вы можете поместить jqGrid внутри любой панели вашего макета, и они будут изменены, чтобы они соответствовали области, в которой она находится, когда изменяется центральная панель.

источник

2010-05-28 02:17:06 Horacio

Я использую jqgrid 4.0 (с помощью JQuery плагин распорки 2) и JQuery плагин макета. Предыдущий ответ не работает для меня. Однако проблема была только в функции resizeGrid. Просто замените функцию resizeGrid выше. Это изменит только одну сетку - ту, чей идентификатор равен gridtable.

function resizeGrid(pane, $Pane, paneState) { 
    jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true'); 
};

#gridtable является идентификатор элемента таблицы вы создаете для jqgrid

<div id="grid_container"> 
    <table id="gridtable" class="mygrid"></table> 
    <div id="grid_pgr"></div> 
</div>

Кроме того, если вы используете JQuery Struts2 плагин, сетка автоматически генерируется с использованием <script> блоков в <body> (не в сценариях блоков в пределах <head>). Итак, если вы вызвали layout() и установили triggerEventsOnLoad: true в <head>, вы получите ошибку javascript. Чтобы этого избежать, вы можете добавить этот блок сценария где-нибудь после объявления вашей сетки.

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery("#gridtable").jqGrid('setGridWidth',$myLayout.state.center.innerWidth - 2, 'true'); 
}); 
</script>

Если у вас есть более чем одной сетки, вы можете получить к ним доступ с помощью класса вы определили на элемент таблицы (см фрагмент кода HTML выше), а затем запустить resizeGrid метод на каждом из них.

источник

2011-05-18 13:25:35 Rosh

Сделать jqGrid заполнить его контейнер

ответ

Смежные вопросы