剑道网格中的列级垂直分页答案

【问题标题】：Column level vertical paging in kendo grid剑道网格中的列级垂直分页
【发布时间】：2015-08-03 10:29:45
【问题描述】：

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

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

提前致谢。

【问题讨论】：

您是否还需要对结果“行”数据集进行分页。例如。您的数据行数会超过页面大小吗？您必须自己实现这一点，因为默认分页机制将通过行而不是列，您还必须处理列重新绑定/（隐藏/显示）。在您的情况下，Grid 控件实际上是您需要实现的目标吗？如果您一次只显示一行，那么为什么不使用可以翻页的漂亮表格呢？问题域的更多上下文可能有助于获得有用/详细的答案。
另外，为什么不显示包含最重要列的“行”摘要，然后弹出“详细”数据视图。这可能是更适合您的解决方案，这完全取决于您希望通过此解决方案实现的目标。
@DavidShorthose 感谢您的回复。是的，我什至会在同一个网格中进行逐行分页。我正在尝试通过列数和基于列页数的可见显示/隐藏来实现。但是我只想检查是否有更好的主意，是否有来自 Kendo Grid 的内置支持。
没有内置对“列”分页的支持，但您可以实现一个允许这种功能的工具栏。通过单击按钮显示/隐藏列。但从用户的角度来看，这可能有点“笨拙”。如果你想要的话，我很乐意为你准备道场。列数将始终为 18 还是会有所不同？
感谢您的帮助和支持。列数会有所不同，我以 18 为例。工具栏实现将非常适合我的要求。我们不担心用户的体验，因为它是一个企业应用程序，用户将接受使用培训。我也会从头开始尝试，如果我成功了，我会更新。

标签： kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

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

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

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

为了确保我有 tagged 正确的列，我在标题中添加了一个 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>

通过使用组名称标记示例中的按钮，我可以轻松选择在单击时应显示/隐藏哪些列。

那么神奇的一点就发生在这里：

    $('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 中设置的那些列。

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

【讨论】：