KendoUI Grid 中的无效行数答案

【问题标题】：Invalid rows count in KendoUI GridKendoUI Grid 中的无效行数
【发布时间】：2016-01-04 09:17:58
【问题描述】：

我有一个包含 KendoUi 网格的表单，我只想在网格有行时启用提交按钮（使用 ng-disabled）。

我可以使用kGrid.dataSource.data().length 获取行数，当网格有行时计数是正确的，但是当我删除或取消最后一行时，计数为 1 并且不会按预期更新为 0。

我在这里重现了这种行为：https://snippet.run/xa12，只需单击“添加新记录”按钮，然后取消。

【问题讨论】：

【解决方案1】：

请尝试以下代码。

<body>
    <div class="ng-scope" data-ng-app="myApp">
        <div class="ng-scope ng-binding" data-ng-controller="myController">

            <div style="" class="k-grid k-widget" data-role="grid" kendo-grid="kGrid" options="mainGridOptions"><div class="k-header k-grid-toolbar ng-scope"><a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"></span>Add new record</a></div><div style="padding-right: 17px;" class="k-grid-header"><div class="k-grid-header-wrap k-auto-scrollable"><table role="grid"><colgroup><col><col style="width:100px"><col style="width:100px"><col style="width:180px"></colgroup><thead role="rowgroup"><tr role="row"><th class="k-header ng-scope" role="columnheader" data-field="aname" rowspan="1" data-title="Article" data-index="0" id="0a08329f-d7f3-48d5-933b-e72b9d3c9a7f">Article</th><th class="k-header ng-scope" role="columnheader" data-field="price" rowspan="1" data-title="Price" data-index="1" id="273ccd7b-5585-4e45-a815-438d9ee68fbf">Price</th><th class="k-header ng-scope" role="columnheader" data-field="qty" rowspan="1" data-title="Quantity" data-index="2" id="afe572ff-58f7-4923-a03c-755e7c841e31">Quantity</th><th class="k-header ng-scope" id="ce99e1ab-46a8-4b4c-8f92-6277477ba4d9" rowspan="1" data-index="3">&nbsp;</th></tr></thead></table></div></div><div class="k-grid-content k-auto-scrollable"><table role="grid"><colgroup><col><col style="width:100px"><col style="width:100px"><col style="width:180px"></colgroup><tbody role="rowgroup"></tbody></table><div style="width: 1245px;" class="k-grid-content-expander"></div></div></div>

            <br>
            <br>
            Lines number  : <span id="spnCount"></span>
            <!--{{ kGrid.dataSource.data().length }}-->

        </div>
    </div>
    <script>
        var ultiApp = angular.module('myApp', ['kendo.directives']);

        var docLines = [];
        var counter = docLines.length;

        ultiApp.controller('myController', function ($scope) {

            $scope.mainGridOptions = {
                dataSource: {
                    transport: {
                        read: function (o) { o.success(docLines); },
                        create: function (o) {
                            var item = o.data;
                            item.id = counter++;
                            o.success(item);
                            document.getElementById("spnCount").innerHTML = counter;
                        },
                        update: function (o) { o.success(); },
                        destroy: function (o) {
                            o.success();
                            counter--;
                            document.getElementById("spnCount").innerHTML = counter;
                        }
                    },
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                aname: { validation: { required: true } },
                                price: { type: "number", validation: { min: 0, required: true } },
                                qty: { type: "number", validation: { min: 0, required: true } }
                            }
                        }
                    }
                },

                pageable: false,
                toolbar: ["create"],
                editable: "popup",
                columns: [
                  { field: "aname", title: "Article" },
                  { field: "price", title: "Price", format: "{0:c}", width: "100px" },
                  { field: "qty", title: "Quantity", width: "100px" },
                  { command: ["edit", "destroy"], title: "&nbsp;", width: "180px" }
                ]
            }

        });
    </script>
</body>

【讨论】：

+1 谢谢。显然，KendoUI 数据源存在一个错误，目前手动处理计数是一种困难的解决方案，但在使用 angular 时最好避免 jquery 直接 dom 操作。我用角度计数器变量更新了 refork 示例。