javascript — загрузка js-сетки и фильтрация данных.

Question

javascript — загрузка js-сетки и фильтрация данных.

У меня есть данные, которые извлекаются из БД с помощью php, а затем передаются в javascript для загрузки js-grid. У меня также есть выпадающий список с php, содержащий значение по умолчанию, выбранное и сохраненное пользователем. Моя цель состоит в том, чтобы заполнить таблицу всеми возвращенными данными, а затем отфильтровать ее по выбранному параметру в раскрывающемся списке.

Я не могу понять, как загрузить, а затем фильтровать данные с помощью js-grid.

<script type="text/javascript">var order_json = <?= $order_json ?>; var user_list = <?= $user_list['activeListId'] ?>;</script>
<script type="text/javascript" src="js/main.js"></script>

main.js

$( document ).ready(function() {
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",

inserting: false,
editing: false,
sorting: true,
paging: false,
pageSize: 30,

noDataContent: "No orders found",

data: order_json,

fields: [
{ name: "OrderId", type: "number", title: "Order ID", visible: false },
{ name: "ListId", type: "number", title: "Order List ID", visible: true},
{ name: "Name", type: "text", title: "Order Name", align: "left"}
],
});
var grid = $("#jsGrid").data("JSGrid");
grid.search({ListId: user_list})
});

Я пробовал несколько разных подходов, и ни один не работал. Любая помощь будет оценена.

3

javascript jquery jsgrid php

Решение

Другие решения

                    loadData: function (filter) {
criteria = filter;
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/api/advertisements",
dataType: "json"}).done(function(response){
var res = [];
if(criteria.Title !== "")
{
response.forEach(function(element) {
if(element.Title.indexOf(criteria.Title) > -1){
res.push(element);
response = res;
}
}, this);
}
else res = response;
if(criteria.Content !== "")
{
res= [];
response.forEach(function(element) {
if(element.Content.indexOf(criteria.Content) > -1)
res.push(element);
}, this);
}
else res = response;

data.resolve(res);
});
return data.promise();
},

0

Источник

Accepted Answer

С помощью js-grid фактическая фильтрация данных должна быть реализована разработчиком.
Фильтрация может быть выполнена на стороне клиента или на стороне сервера. Фильтрация на стороне клиента реализована в loadData метод контроллера. Фильтрация на стороне сервера выполняется серверным скриптом, который получает параметры фильтрации и использует их для извлечения данных.

Вот как твоя controller.loadData метод может выглядеть так:

loadData: function(filter) {
var d = $.Deferred();

// server-side filtering
$.ajax({
type: "GET",
url: "/items",
data: filter,
dataType: "json"}).done(function(result) {
// client-side filtering
result = $.grep(result, function(item) {
return item.SomeField === filter.SomeField;
});

d.resolve(result);
})

return d.promise();
}

Что касается data опция, она используется только для статических данных сетки.

Стоит упомянуть, что было бы лучше предоставлять данные в сетку с помощью REST-сервиса (конечно, это можно сделать с помощью PHP).
Вот пример проекта, показывающий, как использовать js-grid с сервисом REST на PHP https://github.com/tabalinas/jsgrid-php.

2