Question

我使用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})
});

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

Answer 1

使用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-y服务向网格提供数据会更好（当然，可以使用PHP完成）。这是一个示例项目，展示如何在PHP https://github.com/tabalinas/jsgrid-php上使用带有REST服务的js-grid。

Answer 2

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

Answer 3

每当涉及过滤时，就会调用控制器的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函数：https://github.com/tabalinas/jsgrid/issues/759

如果要手动调用过滤，则可以使用文档中所述的搜索功能：http://js-grid.com/docs/#searchfilter-promise

加载js-grid然后过滤数据

3 个答案: