Блог

Мы разрабатываем приложение на javascript. Это приложение будет использовать jqGrid для целей визуализации сетки. У нас есть javascript «API», который предоставляет функциональность для ввода данных с сервера.

API предоставляет данные в формате JSON, эти данные содержат такую информацию, как: {Итоговые результаты, номер страницы, nrRecords, фактический массив строк}

Теперь нам нужно заполнить jqGrid с помощью этого API. Итак, мы не будем использовать url свойство сетки. Мы также хотим, чтобы разбивка на страницы / поиск работали с использованием доступного API. Этот API имеет функции, которые принимают параметры поиска в качестве аргумента и возвращают данные с сервера после применения параметров поиска.

Какое бы исследование мы ни проводили в jqGrid, мы не смогли найти способ интегрировать этот API с jqGrid. Мы пытались делать это до сих пор:

 $('#grid').jqGrid({
    data: this.gridData, // Initial data returned by the API in JSON format, suppose 5 rows
    datatype: "local",
    colNames:['Id', 'Name'], 
    colModel:[ {name:'id', index:'id', width:20}, 
               {name:'firstName', index:'firstName', width:80}, 
             ]
    onPaging: function (pgButton) {
                // Use the API to get the next page data and populate the jqGrid
    }
    rowNum: this.gridData.length,
    rowTotal: this.getTotalGridLength, // This part is not working!!
)};
  

В приведенном выше примере мы получаем сетку только с 5 строками, а кнопка next не активна. Как нам установить общее количество строк (this.getTotalGridLength ), чтобы, когда пользователь нажимает next, мы получали новые данные в onPaging функции и соответствующим образом заменяли сетку?

Это первое препятствие, нам также нужно заставить поиск / фильтрацию работать с использованием того же API.