Question

当我点击其中一行而不是使用展开行时，我试图获取所有子（详细信息）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。我尝试了几种方法，但是我无法达到我想要的效果。

Answer 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/

Kendo UI Grid Hierarchy如何通过单击其中一个行字段来获取子（详细）ID

1 个答案: