Цикл статей «Документация jqGrid на русском».
Следующая статья — «Свойства jqGrid».
Предыдущая статья — «Моя первая таблица в jqGrid».
Экземпляр jqGrid — это объект Javascript со своими свойствами, событиями и методами. Свойства могут быть строками, числами, массивами, логическими значениями и даже другими объектами.
1 |
jQuery("#grid_id").jqGrid(options); |
HTML:
1 2 3 4 5 6 7 8 |
<html> .... <body> ... <table id="grid_id"></table> ... </body> <html> |
Где:
-
grid_id — это id элемента <table>, объявленного в вашем HTML-файле. Используется в качестве имени вашей таблицы.
-
options — это массив настроек вида «имя:значение». Некоторые из этих настроек принимают скалярные величины, некоторые принимают функции, которые будут вызываться при возникновении определённых событий. Некоторые из настроек обязательны, некоторые нет.
Пример с XML-данными взят из статьи «Моя первая таблица».
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 |
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' }); }); </script> |
Другой пример с данными в виде JSON:
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 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#grid").jqGrid({ url:'/jqGridModel?model=Wine', datatype: "json", mtype: 'GET', colNames:['id', 'Provider', 'Name', 'Year', 'Description', 'Type', 'Geographical Region', 'Creation Date', 'Edit Date'], colModel:[ {name:'id',index:'id', width:55, sortable:false, editable:false, editoptions:{readonly:true,size:10}}, {name:'provider',index:'provider', width:200,editable:false}, {name:'name',index:'name', width:200,editable:true}, {name:'year',index:'year', width:100,editable:true}, {name:'description',index:'description', width:300,editable:true}, {name:'type',index:'type', width:200,editable:true,edittype:'select',editoptions:{dataUrl: '/jqGridOptionData?entity=WineType'}}, {name:'geographical_region',index:'geographical_region', width:200,editable:true}, {name:'creationDate',index:'creationDate', width:100}, {name:'editDate',index:'editDate', width:100}, ], jsonReader : { repeatitems:false }, rowNum:10, rowList:[10,20,30], pager: jQuery('#gridpager'), sortname: 'name', viewrecords: true, sortorder: "asc", caption:"Wines", editurl:"/jqGridModel?model=Wine" }).navGrid('#gridpager'); }); </script> |
1 2 3 4 |
<div id="jqgrid"> <table id="grid"></table> <div id="gridpager"></div> </div> |
Все важные настройки таблицы вы обычно будете задавать при создании таблицы, но также возможно менять их позже.
Генерируемые таблицей события дают возможность выполнять дополнительные действия.
Есть несколько методов для получения значений свойств и задания новых значений свойств.
Основное свойство таблицы — colModel, которое задаёт модель колонок.
Дополнительные свойства, события и методы таблицы, не описанные в этой секции, используются для создания трёх специальных типов таблиц: таблиц с множественным выбором, подтаблиц и деревьев.
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Свойства jqGrid».
Предыдущая статья — «Моя первая таблица в jqGrid».