在 Kendo UI Grid 中仅显示两条记录答案

【问题标题】：Display only two records in Kendo UI Grid在 Kendo UI Grid 中仅显示两条记录
【发布时间】：2015-10-28 05:36:30
【问题描述】：

我在这里有一个要求，在页面加载时只显示两条记录，当用户点击显示所有按钮时，应该显示其余记录。

我目前正在做的是，在加载时仅将两条记录绑定到网格，然后单击“显示所有”按钮破坏网格并使用所有记录再次创建它。

使用这种方法，当我显示记录数时，用户会感到困惑，因为最初总记录只有 2 条，当点击显示全部时，它会根据记录发生变化。

为了避免这种情况，我想首先绑定所有记录，并通过某种剑道设置仅显示两条记录。

这可能吗？

我也在使用 angularjs，并将 angular $scope 对象作为数据源分配给网格。

【问题讨论】：

标签： jquery angularjs kendo-ui telerik kendo-grid

【解决方案1】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding"> 
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" /> 
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <button value="show all" onclick="ShowAll()">Show All</button>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    }
                },
                height: 550,
                groupable: true,
                dataBound: onDataBinding,
                sortable: true,
                columns: [{
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        }); 
        function onDataBinding(arg) {
            var grid = $("#grid").data("kendoGrid");
            $(grid.tbody).find("tr").hide();
            $(grid.tbody).find("tr:eq(0)").show();
            $(grid.tbody).find("tr:eq(1)").show();
        }
        function ShowAll() {
            var grid = $("#grid").data("kendoGrid");
            $(grid.tbody).find("tr").show();
        }
    </script> 
</body>
</html>

如果有任何问题，请告诉我。

【讨论】：