kendo 网格中的列级垂直分页

Question

我有这样的要求：将 18 列数据显示到 kendo 网格中。但是，列应该分页。这意味着默认情况下，在页面加载时将显示前 6 列，并显示页码 2 和 3。如果我单击第 2 页网格将显示第 7 列到第 12 列，第 3 页显示第 13 列到第 18 列。Kendo UI 网格中是否有可用的隐式功能。我是 v.new 到 Kendo。有人可以提出一些建议/想法吗？

我在 Asp.Net Mvc 5 上使用 Kendo，我需要进行一些服务器端实现吗？

提前致谢。

Answer 1

我已经准备了一个示例 dojo，希望它能展示这种类型的功能。它可能不是您想要的，但为您提供了开发更适合您需求的东西的基础工作。 Hide Columns in Groups

我基本上采用了 Kendo 演示之一并对其进行了修改以显示功能。

我用这些组创建了两组列（columnGroup1、columnGroup2）然后我有一个按钮，该按钮被配置为显示和隐藏这些组中包含的列。

为了确保 tagged 列正确，我向 headers 添加了一个 data-* 属性，如下所示：

{field: "UnitPrice", 
title: "Unit Price", 
format: "{0:c}", 
width: "130px", 
headerAttributes:{ 
                   "data-type":"columnGroup1"
                 }
}

通过这样做，我可以像这样简单地连接一个按钮：

<button data-type="columnGroup1" data-mode="show">Hide Group 1</button>

通过用组名标记示例中的按钮，然后我可以轻松地选择单击时应 shown/hidden 的列。

然后神奇的事情发生在这里：

    $('button[data-type]').on('click', function (e) {
     e.preventDefault();

     var mode = $(this).data("mode");

     var type = $(this).data("type");

     showHideColumns(type, mode === "hide");

     if (mode === "hide") {
         $(this).text("Show " + type)
         $(this).data("mode", "show");
     } else {
         $(this).text("Hide " + type)
         $(this).data("mode", "hide");
     }
 });


 });



 function showHideColumns(group, mode) {

     //if mode = true then we are to show the columns
     //if mode = false then we are the hide the columns 
     var grid = $('#grid').data("kendoGrid");
     var columns = $('th[data-type="' + group + '"]');
     if (!mode) {
         //this is where we will hide the grid headers.
         columns.each(function (me) {
             grid.hideColumn($(this).data("field"));
         });

     } else {
         columns.each(function (me) {
             grid.showColumn($(this).data("field"));

         });

     }


     console.log(group, mode);
 }

我将点击事件绑定到具有 data-type="xxx" 的按钮，然后检查按钮是否应该显示或隐藏列取决于 data-mode=show/hide 设置。然后我将操作推送到 showHideColumns 函数，然后这将隐藏或显示已在该 columnGroup 中设置的那些列。

希望这能让你继续下去，但如果你需要演示调整/更多解释，请告诉我。

kendo 网格中的列级垂直分页

Column level vertical paging in kendo grid

kendo-ui

kendo-grid

kendo-asp.net-mvc