一次隐藏/显示剑道网格​​中的所有列

Posted 2023-05-07

【中文标题】一次隐藏/显示剑道网格​​中的所有列

【英文标题】：Hide/Show all columns in kendo grid in one go

【发布时间】：2016-09-17 17:32:17

【问题描述】：

我在剑道网格中有 120 列，并具有全选和取消全选功能。 如果我使用每个循环，则隐藏或显示所有列需要花费大量时间。 有没有办法在一次调用中隐藏/显示所有列。

只想提一下剑道 showColumn/hideColumn 很慢。

$(".some-class").each(function()
 var field1 = $(this).data("field");
 input.find('label').addClass('enableCheck');
 input.find('label').removeClass('disableCheck');
 $("#grid-id").data("kendoGrid").showColumn(field1);

【问题讨论】：

不确定您想要实现什么。你不能从网格或 $("#gridname").find("table th").hide(); 中隐藏/显示网格容器 div / k-grid-content 吗？显示/隐藏速度更快。

在网格的列上放置一个通用的 css 类并使用 jquery 或 css 隐藏/显示它们

【参考方案1】：

好吧，我为您创建了这种场景的演示：Show/Hide all columns

这使用网格的内置显示/隐藏功能，并使用比您的网格稍大的网格，平均大约 130 列，它可以在不到 2 秒的时间内完成操作。我添加了一个“计时器”，因此您可以从它到达列循环到操作结束的点看到它需要多长时间。

 $("#clickme").on('click',function()
                   var grid =$("#grid").data("kendoGrid"); 

                    var columns = grid.getOptions().columns; 

                    var start = new Date().getTime(); 

                    columns.forEach(function(me)

                      if(me.hidden !== undefined && me.hidden === true)
                      
                        grid.showColumn(me.field); 
                      
                      else 
                      
                        grid.hideColumn(me.field); 
                      

                      //console.log(me); 

                    ); 

                    var end = new Date().getTime(); 
                    console.log(start,end, end-start); 
                    $("#timer").text((end-start)/1000 + ' Seconds to run'  ); 

                  ); 

所有这一切都是获取网格中的列，然后检查它当前是否隐藏（如果是则显示它，否则它将隐藏它）

这只是绑定到一个简单的按钮，您可以在网格下方单击该按钮。

对于这种类型的操作，我认为不到 2 秒就足够快了，并且“感觉”对于这个数量的列来说是正确的，这取决于你在当前页面上有多少行，它还必须隐藏所有这些元素.

【讨论】：

感谢@David 的好回答，但就我而言，我有一些默认的隐藏列。对于 ID 等不同的数据，这是随机的，如果 hidden===true，则所有这些都不能使用显示列。其次我得到 grid.getOptions() is not defined 错误和 var columns = grid.options.columns;为我工作。

好吧，您可以将data-binding 属性添加到“隐藏”列或将它们设置为不可见，它们应该被我的代码忽略。显然 grid.getOptions() 特定于我的示例，因此您需要将 var 声明更改为您的特定网格实例。或者，如果您使用的是旧版本的 kendo ui，那么它可能在您的版本中不受支持。

查看带有“超级隐藏”字段的更新示例，即即使它们最初设置为隐藏也不会被带回dojo.telerik.com/oFaTi/2