Вы когда-нибудь задумывались о том, чтобы отображать и манипулировать табличными данными, не занимаясь кодированием или вызовом сервера для каждой операции, чтобы это происходило на стороне клиента. Что ж, jqGrid — это самый простой способ начать исследовать свою игру.
Что такое jqGrid?
jqGrid — это javascript с поддержкой Ajax. Он предоставляет решения для создания таблицы и управления данными на стороне клиента и может быть интегрирован с любой технологией на стороне сервера.
Он будет динамически загружать данные через обратные вызовы Ajax.
jqGrid использует библиотеку jQuery JavaScript.
В этом примере показано, как мы можем загружать данные JSON с сервера.
HTML-код
… <table id=”list1"></table> <div id=”pager1"></div>
Код JavaScript
…
jQuery(“#list1”).jqGrid(
{
url:’{URL}',
datatype: “json”,
colNames:[‘SNo’,’Date’, ‘Name’, ‘Age’,’Sex’,’Location’,’Notes’],
colModel:[
{name:’sno’,index:’sno’, width:50},
{name:’date’,index:’date’, width:80},
{name:’name’,index:’name asc, invdate’, width:100},
{name:’age’,index:’age’, width:50, align:”right”},
{name:’sex’,index:’sex’, width:60, align:”right”},
{name:’location’,index:’location’, width:75, align:”right”},
{name:’note’,index:’note’, width:150, sortable:false} ],
rowNum:10,
rowList:[10,20,30],
pager: ‘#pager1’,
sortname: ‘sno’,
viewrecords: true,
sortorder: “desc”,
caption:”Create Example”
});
jQuery(“#list1”).jqGrid(‘navGrid’,’#pager1',{edit:false,add:false,del:false});
В приведенном выше примере вызов API заменяется вместо {URL}. В типе данных, если с сервера возвращается ответ JSON, укажите его как JSON. (Он также может обрабатывать XML, массив).
Настройка и конфигурация сетки управляются параметрами настройки сетки. Как и в приведенном выше примере, мы использовали rowNum, rowList, пейджер, имя сортировки, записи просмотра, заголовок и т. д.
Надеюсь, поможет.
Ваше здоровье,
Хари
