Цикл статей «Документация jqGrid на русском».
Следующая статья — «Настройка TreeGrid в jqGrid».
Предыдущая статья — «Подтаблицы (Subgrid) в jqGrid».
Это не готовый для использования метод, а скорее способ использования доступных методов и событий. В этой альтернативе subGrid мы используем функции subGrid главной таблицы для создания ещё одной таблицы, которая будет иметь все возможности главной таблицы, но будет располагаться под записью родительской таблицы с возможностью показа/скрытия.
Установка
Для того чтобы использовать этот модуль нужно выбрать Subgrid при скачивании таблицы. Для получения более подробной информации обратитесь к статье «Установка jqGrid».
Разработчики могут посмотреть файл grid.subgrid.js в каталоге src.
Инициализация
Мы используем два события, описанных в массиве свойств: subGridRowExpanded и subGridRowColapsed.
Если указаны обработчики этих событий, то заполнение данными подтаблицы не происходит. Мы можем использовать subGridUrl, чтобы получить наши пользовательские данные и вставить их в развернутую строку. Имея это можно легко создать другую таблицу, которая будет действовать как подтаблица.
Выше был описан способ. Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#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, caption: 'My first grid', subGrid: true, subGridRowExpanded: function(subgrid_id, row_id) { // we pass two parameters // subgrid_id is a id of the div tag created within a table // the row_id is the id of the row // If we want to pass additional parameters to the url we can use // the method getRowData(row_id) - which returns associative array in type name-value // here we can easy construct the following var subgrid_table_id; subgrid_table_id = subgrid_id+"_t"; jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>"); jQuery("#"+subgrid_table_id).jqGrid({ url:"subgrid.php?q=2&id="+row_id, datatype: "xml", colNames: ['No','Item','Qty','Unit','Total'], colModel: [ {name:"num",index:"num",width:80,key:true}, {name:"item",index:"item",width:130}, {name:"qty",index:"qty",width:80,align:"right"}, {name:"unit",index:"unit",width:80,align:"right"}, {name:"total",index:"total",width:100,align:"right",sortable:false} ], height: '100%', rowNum:20, sortname: 'num', sortorder: "asc" }); } }); }); </script> |
Обработчик события subGridRowColapsed не указан. Это правильно, так как при свёртывании строки содержимое тега div будет удалено.
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Настройка TreeGrid в jqGrid».
Предыдущая статья — «Подтаблицы (Subgrid) в jqGrid».