Question

我有一个网格，在detailInit中有一个网格，当我在detailInit中的网格中添加新行时，detailInit折叠。

添加新记录后，如何防止其崩溃？我尝试在添加新行的按钮单击事件上使用e.preventDefault（），但没有成功。

Answer 1

您无法阻止它崩溃，因为每次对数据进行更改时，它都会自动重新绑定并重新绘制表。

但是，您可以做的是捕获重新绑定，找到打开的细节，并在绑定完成后重新打开它们：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>

<div id="example">
    <div id="grid"></div>

    <script>
        let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];

        $(document).ready(function () {
            let expanded = [];

            var element = $("#grid").kendoGrid({
                dataSource: data,
                toolbar: [{name: "create"}],
                height: 600,
                detailInit: detailInit,
                editable: true,
                columns: [
                    {
                        field: "id",
                        title: "id",
                    },
                    {
                        field: "FirstName",
                        title: "First Name",
                        width: "110px"
                    },
                    {
                        field: "LastName",
                        title: "Last Name",
                        width: "110px"
                    },
                    {command: ["destroy"]},
                ],
                dataBinding: function (e) {
                    expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
                        return $(row).data("uid");
                    });
                },
                dataBound: function (e) {
                    this.expandRow(this.tbody.children().filter(function (idx, row) {
                        return $.inArray($(row).data("uid"), expanded) >= 0;
                    }));
                },
            });

        });

        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    transport: {
                        read: function (options) {
                            options.success(e.data.orders);
                        },
                    }
                },
            });
        }
    </script>
</div>
</body>
</html>

停止detail在向网格添加新行时初始化折叠吗？

1 个答案: