Kendo UI Grid Hierarchy 如何通过单击行字段之一来获取子项（详细）ID答案

【问题标题】：Kendo UI Grid Hierarchy how to get children(detail) IDs by clicking one of the row fieldKendo UI Grid Hierarchy 如何通过单击行字段之一来获取子项（详细）ID
【发布时间】：2014-07-30 20:31:24
【问题描述】：

当我单击某一行而不是使用展开行时，我试图获取所有子项（详细信息）ID。

我想单击其中一个详细信息行并获取所有详细信息 ID。

我尝试从 click 事件中调用 detailInit，但出现错误。一种让所有孩子都进入数组的方法吗？我正在尝试获取 ID 以调用其他服务。这是一个代码示例。

<body>
    <div id="example">
        <div id="grid"></div>

        <script>
            $(document).ready(function() {
                var element = $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
                        pageSize: 6,
                        serverPaging: true,
                        serverSorting: true
                    },
                    height: 600,
                    sortable: true,
                    pageable: true,
                    detailInit: detailInit,
                    dataBound: function() {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },
                    columns: [
                        {
                            field: "FirstName",
                            title: "First Name",
                            width: "110px"
                        },
                        {
                            field: "LastName",
                            title: "Last Name",
                            width: "110px"
                        },
                        {
                            field: "Country",
                            width: "110px"
                        },
                        {
                            field: "City",
                            width: "110px"
                        },
                        {
                            field: "Title",
                           title: "Detail"
                        }
                    ]
                });
            });

            function detailInit(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                        pageSize: 10,
                        filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "OrderID", width: "70px" },
                        { field: "ShipCountry", title:"Ship Country", width: "110px" },
                        { field: "ShipAddress", title:"Ship Address" },
                        { field: "ShipName", title: "Ship Name", width: "300px" }
                    ]
                });
            }
        </script>
    </div>
</body>

当我单击其中一个详细信息行时，我想获取该行中的所有详细信息 ID。请帮助我如何实现这一目标。我想获得 OrderID。我尝试了几种方法，但我无法达到我想要的效果。

【问题讨论】：

所以您根本不想显示该数据？您只想检索通常会出现在详细信息行的嵌套网格中的订单的 ID？如果是这种情况，您甚至不需要在网格中设置详细信息行。你应该只做一个 Ajax 调用来获取你需要的过滤数据。

标签： kendo-ui kendo-grid

【解决方案1】：

正如@JonathanBuchanan 所说，如果您不打算显示详细的网格，那么使用它是没有意义的。只需要在选择一行时加载数据。

为此，您必须将函数绑定到定义 DataSource 的 change 事件处理程序，然后在读取过程中接收到数据。

在您的示例中，您应该这样做：

var element = $("#grid").kendoGrid({
    ...
    selectable: true,
    change : function(e) {
        // Get the item from the model corresponding to the selected row.
        var item = this.dataItem(this.select());
        // Load orders for an Employee
        loadOrdersByEmployeeId(item.EmployeeID);
    },
    ...
});

函数loadOrdersByEmployeeId 看起来像：

function loadOrdersByEmployeeId(employeeID) {
    // Define a DataSource that reads Orders for an Employee given its ID
    var ds = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 10,
        filter: { field: "EmployeeID", operator: "eq", value: employeeID }
    });
    // Fetch data and 
    ds.fetch(function (data) {
        // Extract OrderID and save it in an array
        var orders = [];
        $.each(data.items, function (idx, elem) {
            orders[idx] = elem.OrderID;
        });
        // Display Orders
        alert("orders:" + JSON.stringify(orders));
    });
}

你可以在这里看到这个运行：http://jsfiddle.net/OnaBai/XsLbz/

【讨论】：

谢谢大家，我通过传递 ID 使用 ajax 调用解决了这个问题。