Рендеринг

Под словом «Рендеринг» в jqGridPHP подразумевается автоматическое создание HTML & Javascript кода, необходимого для отображения таблицы jqGrid в браузере.
В примере из документации код самой простой таблицы выглядит так:

<table id="list"></table> 
<div id="pager"></div> 
 
<script type="text/javascript">
$(function(){ 
  $("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'My first grid'
  }); 
}); 
</script>

Довольно длинно и не очень наглядно - особенно если у вас много колонок с нестандартными опциями.
Когда вам нужно добавить новую колонку, то нужно править сразу в двух местах - colModel на стороне клиента и выдачу данных на стороне сервере. При этом очень легко ошибиться или что-то перепутать.

В jqGridPHP постарались решить эту проблему, создавая максимум кода автоматически. Простой рендеринг таблицы выглядит так:

<?=$loader->render('example');?>

Как происходит рендеринг

1. Создается HTML-разметка:

  • Пустой TABLE для таблицы
  • Пустой DIV для элемента 'pager'

2. Определяются глобальные javascript-переменные.

  • var pager - хранит id элемента 'pager'
  • var $example - jQuery объект созданной таблицы 1)
  • var $grid - jQuery объект последней созданной таблицы 2)

3. Создается массив опций и передается в jQuery функцию jqGrid. Опции следующие:

  • url, editurl, cellurl - URL, который вызовет нужный класс таблицы
  • colModel - создается на основании массива $this→cols
  • pager - ссылка на 'pager'
  • Любые другие опции, явно указанные в $this→options

4. Создается навигатор (панель с кнопочками).

  • Опции из $this→nav напрямую передаются в аргументы функции navGrid.
  • Если были указаны нестандартные кнопки, то последуют дополнительные вызовы navButtonAdd для их добавления.

Все эти части собираются вместе в одну строку и возвращаются функцией render.

1) Имя переменной соответствует имени класса таблицы. Например, для таблицы 'jq_example' имя переменной будет $jq_example
2) Это очень удобно для разработчика. Рекомендуется использовать переменную $grid во всех операциях, которые идут сразу после создания таблицы: добавление кнопок, custom-событий и т.п. Таким образом вы сможете использовать прямой Copy-Paste этого кода в дальнейшем, не волнуясь о необходимости заменять переменные.

На других языках