jsGrid 插件 - 如何过滤远程数据？答案

【问题标题】：jsGrid plugin - How to filter with remote data?jsGrid 插件 - 如何过滤远程数据？
【发布时间】：2016-11-27 04:13:42
【问题描述】：

我是 javascript 的新手。我正在使用 jsGrid 插件在浏览器中显示网格。网格列标题将具有值“请求状态”和“请求 ID”。我可以让它与静态数据一起工作。

(function() {
    var adminDashboardController = {
        loadData: function(filter) {
            return $.grep(this.requests, function(request) {
                return (!filter.Status || request.Status === filter.Status)
                && (!filter.RequestId || request.RequestId.indexOf(filter.RequestId) > -1)
            });
        },

        insertItem: function(insertingReq) {
        },

        updateItem: function(updatingReq) { 
        },

        deleteItem: function(deletingReq) {
        }
    };

    window.adminDashboardController = adminDashboardController;

    adminDashboardController.status = [
        { Name: ""},
        { Name: "Requested"},
        { Name: "Declined"}
    ];

    //This is the static data
    adminDashboardController.requests = [
        { "Status": "Requested", "RequestId": "1"},
        { "Status": "Declined", "RequestId": "2"}
    ];
}());

但是在从 ajax 调用中获取数据时（使用 json 文件作为数据源进行测试），当我选择“已请求”或“已拒绝”作为过滤条件时，数据不再被过滤。我正在使用这样的文档中提到的格式 -

(function() {
    var adminDashboardController = {
        loadData: function (filter) {
            return $.ajax({
                type: "GET",
                dataType: "json",
                url: "/json/db514.json",
                data: filter
            });
        },
        insertItem: function(insertingReq) {
        },

        updateItem: function(updatingReq) { 
        },

        deleteItem: function(deletingReq) {
        }
    };

    adminDashboardController.status = [
        { Name: ""},
        { Name: "Requested"},
        { Name: "Declined"}
    ];
}());

我不明白这种情况下如何实现过滤！

【问题讨论】：

标签： javascript jquery jsgrid

【解决方案1】：

原因是应该在代码中实现过滤。

一般情况下是可以做到的：

在客户端上（就像在您的第一个示例中一样）
在后端，您必须将过滤器传递给您的端点，它会进行过滤并返回数据。
组合方法（部分在后端，之后在客户端）

在您的情况下，您可以在后端添加一个端点，该端点将加载 json 并过滤数据，或者仍然在客户端进行过滤，例如：

loadData: function (filter) {
    return $.ajax({
        type: "GET",
        dataType: "json",
        url: "/json/db514.json"
    }).then(function(requests) {
        return $.grep(requests, function(request) {
            return (!filter.Status || request.Status === filter.Status)
            && (!filter.RequestId || request.RequestId.indexOf(filter.RequestId) > -1)
        });
    });
}

在 GtiHub https://github.com/tabalinas/jsgrid/issues/32 上查看此问题。

【讨论】：