如何获取剑道列表视图数据项计数答案

【问题标题】：How to get kendo listview data item count如何获取剑道列表视图数据项计数
【发布时间】：2013-08-19 08:20:25
【问题描述】：

我有一个绑定到数据源的剑道列表视图。当用户单击添加按钮时，我调用$("#arealistview").data("kendoMobileListView").prepend([newItem])，它将一个新项目添加到列表的开头。

如何获取列表视图中项目的计数？

【问题讨论】：

【解决方案1】：

数据源的total 方法应该返回：

var total = $("#arealistview").data("kendoMobileListView").dataSource.total();

也可以获取data方法返回的数组长度：

var data = $("#arealistview").data("kendoMobileListView").dataSource.data();
var total = data.length;

【讨论】：

如果我使用您的建议，那么我可以获得数据源中项目的数量，但这不包括我使用 .prepend() 在本地添加的任何新项目。

【解决方案2】：

我相信你应该可以做到

var numItems=$("#arealistview").data("kendoMobileListView").length;

您可以随时参考这里http://docs.kendoui.com/api/web/listview，如果仍然没有结果，我建议您与剑道代表联系，他们是非常乐于助人的人。

【讨论】：

我已经尝试过了，我得到“未定义”。我找到了像 $("#arealistview").children("li").length 这样的“非剑道方式”，但我更喜欢剑道方式。感谢您的快速回复。
我想我明白了：var numItems=$("#arealistview").data("kendoMobileListView").element.children().length;
哦，好的。基于 API，我假设数据字段是一个数组，因此可以轻松引用 .length。我猜不会。搞清楚它的好工作！

【解决方案3】：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/dragdrop">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    

</head>
<body>
        <div id="example">
            <div class="demo-section k-content">
                <h4>Treeview One</h4>
                <div id="treeview-left"></div>
            </div>
          
      <script id="treeview-template" type="text/kendo-ui-template">
            #= item.text # <span class='item-count'></span>
        </script>
  
            <script>
                $("#treeview-left").kendoTreeView({
                   template: kendo.template($("#treeview-template").html()),
                  
                    dataSource: [
                        { text: "Furniture", expanded: true, items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ] },
                        { text: "Decor", items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ] }
                    ],
                   dataBound: function(e) {
                     
                var item = this.dataItem(e.node);
                var children = item && item.children ? item.children.data().length : undefined; 
                var text = children ? ("(" + children + ")") : "";
                $(e.node).find(">div .item-count").text(text);
              }
                });

                $("#treeview-right").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: [
                        { text: "Storage", expanded: true, items: [
                            { text: "Wall Shelving" },
                            { text: "Floor Shelving" },
                            { text: "Kids Storage" }
                        ]
                        },
                        { text: "Lights", items: [
                            { text: "Ceiling" },
                            { text: "Table" },
                            { text: "Floor" }
                        ]
                        }
                    ]
                });
            </script>

            <style>
                #treeview-left,
                #treeview-right
                {
                    overflow: visible;
                }
            </style>
        </div>


</body>
</html>

这是树视图

【讨论】：