Javascript 加载js网格，然后过滤数据

我使用php从数据库中提取数据，然后将其传递到javascript以加载js网格。我还有一个用php填充的下拉列表，其中包含用户选择和存储的默认值。我的目标是用返回的所有数据填充网格，然后根据下拉列表中选择的选项对其进行过滤

我似乎不明白如何使用js网格加载然后过滤数据

<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>

---

我尝试过一些不同的方法，但没有一种有效。任何帮助都将不胜感激

使用js网格，数据的实际过滤应由开发人员实现。 过滤可以在客户端或服务器端完成。在控制器的

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();
}

至于

数据

选项，它仅用于静态网格数据

值得一提的是，最好使用REST-y服务向网格提供数据（当然，可以使用PHP完成）。

---

下面是一个示例项目，展示了如何在PHP上使用js网格和REST服务。

每当涉及到过滤时，就会调用控制器的函数loadData。 在那里，您可以实现所需的过滤功能

下面是一个通用筛选器的示例，它检查您在筛选器行中键入的字符串是否包含在相应的行中，并与数字和其他类型一起使用

loadData: function (filter) {
    return $.get('your.url.here')
        .then(result => result.filter(row => Object.keys(filter).every(col => 
            filter[col] === undefined
            || ('' + filter[col]).trim() === ''
            || ('' + row[col]).toLowerCase().includes(('' + filter[col]).trim().toLowerCase())
        )))
}

如果您不是从服务器获取数据，您仍然可以使用loadData功能，如下所述：

---

如果您想手动调用筛选，您可以使用文档中描述的搜索功能：

在jsGrid中，不可能搜索多个值，因此如果

user\u list

的值是用户ID列表（

[1,2,3]

），您的搜索将返回空结果。您可能应该对代码进行注释。它看起来像是某个更大项目的一部分，不清楚这是如何回答这个问题的。另外，请减少不必要的缩进。最好考虑为什么筛选对象对我来说总是空的

                    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();
                    },  

loadData: function (filter) {
    return $.get('your.url.here')
        .then(result => result.filter(row => Object.keys(filter).every(col => 
            filter[col] === undefined
            || ('' + filter[col]).trim() === ''
            || ('' + row[col]).toLowerCase().includes(('' + filter[col]).trim().toLowerCase())
        )))
}