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

Question

我在剑道网格中有 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);
}

Answer 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 秒就足够快了，并且“感觉”对于这个数量的列来说是正确的，这取决于你在当前页面上有多少行，它还必须隐藏所有这些元素.