Заставьте jqGrid заполнить свой контейнер - PullRequest
Новая
       25

Заставьте jqGrid заполнить свой контейнер

8 голосов
/ 27 мая 2010

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

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

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

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

  1. http://www.secondpersonplural.ca/jqgriddocs/index.htm
  2. http://layout.jquery -dev.net /

Ответы [ 3 ]

6 голосов
/ 27 мая 2010

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

2 голосов
/ 18 мая 2011

Я использую jqgrid 4.0 (через плагин jquery struts 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 для каждого из них.

2 голосов
/ 28 мая 2010

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

Сначала создайте функцию изменения размера, которая вызывается событием 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);
    });
  }
}

Затем в вашем макете мы настроили событие resize для вызова этого метода: 

$('#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 в любую панель вашего макета, и они будут изменены, чтобы соответствовать панели, в которой она находится, когда изменяется центральная панель.

  1. http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/4a7c6b09206045f2
  2. http://www.secondpersonplural.ca/jqgriddocs/index.htm
  3. http://layout.jquery -dev.net / documentation.cfm
...