2

我有一个具有唯一标识符的剑道网格，当我单击一行时，我希望它在第二个网格中显示详细信息。这两个数据集都是从链接到数据库的 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;
                                }
                            } 
                            }
4

1 回答 1

1

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

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

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

您应该考虑不要在grid每次选择一个 raw 时重新创建，而是重新填充它。如果是，则初始化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到服务器）。

现在，函数populateGrid2只是：

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

简单、优雅、高效！

你可以在这里filter找到文档

于 2013-04-24T08:17:39.000 回答