php - Kendo UI - 如何在单击时让 SQL 填充网格筛选第二个 SQL 填充网格？

Question

我有一个具有唯一标识符的 Kendo 网格，当我单击一行时，我希望它在第二个网格中显示详细信息。这两个数据集都是从链接到数据库的 php 文件填充的。因此，第二个网格显示了该唯一标识符的所有详细信息。

第一个网格:

$(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                      pageSize: 100,
                        transport: {
                            read: "http://localhost:8888/stationslist.php",
                            dataType: "json"
                        },
                        schema: {
                            data: "data",
                            total: function(response) {
                                return $(response.data).length;
                                }
                            } 
                            },


                    selectable: "single",
                    sortable: {
                        mode: "multiple",
                        allowUnsort: true
                    },
                    change: function (arg) {
                        var selected = $.map(this.select(), function (item) {
                            return $(item).find('td').first().text();
                            });
                          }

第二个网格:

$(document).ready(function() {
                $("#grid2").kendoGrid({
                    dataSource: {
                      pageSize: 100,
                        transport: {
                            read: "http://localhost:8888/spots.php",
                            dataType: "json"
                        },
                        schema: {
                            data: "data",
                            total: function(response) {
                                return $(response.data).length;
                                }
                            } 
                            }

Answer 1

为第一个 grid 实现 change 处理程序:

change    : function (e) {
    var item = this.dataItem(this.select());
    populateGrid2(item);
}

我们从 item 中获取所选行的所有信息(您不需要那么复杂的 $.map)，然后调用第二个函数来填充第二个网格。

您应该考虑不要在每次选择一个原始文件时都重新创建 grid，而是重新填充它。如果是这样，将 grid2 初始化为:

$("#grid2").kendoGrid({
    dataSource : {
        pageSize : 100,
        transport: {
            read        : {
                url     : "http://localhost:8888/spots.php",
                dataType: "json"
            },
            parameterMap: function (arg, op) {
                if (op === "read") {
                    return { id: arg.id }
                }
            }
        },
        schema   : {
            data : "data",
            total: function (response) {
                return $(response.data).length;
            }
        }
    },
    autoBind: false
});

我们说不要自动绑定(bind)(除非我们明确说明，否则不要读取数据)，然后定义一个 parameterMap 函数来管理参数(发送 id到服务器)。

现在，函数 populateGrid2 只是:

function populateGrid2(item) {
    var ds = $("#grid2").data("kendoGrid").dataSource;
    ds.filter({ field: "Identifier", operator: "eq", value: item.Identifier });
}

简单、优雅、高效!

您可以在 here 中找到 filter 文档