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

我有一个要求：将18列数据显示到剑道网格中。但是，这些列应该分页。这意味着默认情况下页面载入前6列将被显示，并且页码2和3将被显示。如果我点击第2页，网格将显示第7列到第12列，第3页显示第13列到第18列。在Kendo UI网格中是否有任何隐式功能可用。我对剑道很感兴趣。请一些身体可以抛出一些灯光/想法吗？剑道网格中的列级垂直分页

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

在此先感谢。

来源

2015-08-03 gee' K' iran

您还需要翻阅结果“行”数据集。例如。你会有比你的pagesize更多的数据行吗？你必须自己实现这一点，因为默认的分页机制将通过行而不是列，并且你还必须处理列重新绑定/（隐藏/显示）。在你的情况下，网格控制实际上是你需要实现的正确的东西？如果您一次只显示一行，那么为什么不使用可以翻页的漂亮表单？问题域的更多上下文可能有助于获得有用/详细的答案。 –

或者，为什么不显示最重要列的“行”摘要，然后弹出“详细”数据视图。这对你来说可能是一个更合适的解决方案，这一切都取决于你想用这个解决方案实现的目标。 –

@DavidShorthose感谢您的回复。是的，我甚至可以在同一个网格中进行明智的分页。我正在尝试通过列计数和基于列页数的可见显示/隐藏来实现。但是我只是想检查一下是否有更好的想法，是否可以从Kendo Grid获得支持。 –

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

我已经基本上采取了其中一个剑道演示，并修改它显示功能。

我已经创建了两组列（columnGroup1,columnGroup2）与这些组，然后我有按钮被配置为显示和隐藏这些组中包含的列。

为了确保我有tagged正确我添加了一个数据 - *属性头，像这样的列：

{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); 
}

我click事件绑定到具有数据类型=“XXX”，然后检查，看看是否该按钮应该显示或按钮隐藏列取决于data-mode=show/hide设置。然后，我将这个动作推向showHideColumns函数，然后这将隐藏或显示已经在该列组中设置的那些列。

希望这会让你走，但如果你需要演示调整/更多的解释，然后让我知道。

来源

2015-08-04 11:50:14

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

回答

相关问题