Question

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

First Grid：

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

为第一个change实施grid处理程序：

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

我们从item获取所选行中的所有信息（您不需要该复杂$.map），然后调用第二个函数来填充第二个grid。< / p>

每次选择一个原始数据但重新填充时，您应该考虑不重新创建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
});

我们说不要自动绑定（在我们明确说明之前不要读取数据）然后定义一个parameterMap函数来管理参数（将id发送到服务器）。 / p>

现在，函数populateGrid2只是：

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

简单，优雅，高效！

您可以在here

中找到filter文档

Kendo UI - 如何让SQL填充网格过滤第二个SQL填充网格点击？

1 个答案: