Question

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

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

提前致谢。

Answer 1

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

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

我创建了两组列（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);
 }

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

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

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

1 个答案: