Hide/Show kendo 网格中的所有列一次性完成

Question

我在 kendo 网格中有 120 列，并且具有 select 全部和 deselect 全部功能。如果我使用每个循环，隐藏或显示所有列将花费大量时间。有什么方法可以 hide/show 一次调用中的所有列。

只想提一下 kendo 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);
}

Answer 1

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

这对网格使用了内置的 show/hide 函数，并使用比您的网格稍大的网格，平均约 130 列，它在不到 2 秒的时间内完成了操作。我添加了一个 "timer"，因此您可以看到从它到达列循环到操作结束需要多长时间。

 $("#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 秒的时间已经足够快了，而且 "feels" 对于这个列数来说是正确的，因为它必须隐藏所有当前页面上的行数这些元素也是如此。

Hide/Show kendo 网格中的所有列一次性完成

Hide/Show all columns in kendo grid in one go

javascript

jquery

var

kendo-ui

kendo-grid