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

Question

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

只是想提一下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

这使用了网格的内置显示/隐藏功能，并使用比您的网格稍大的网格，平均大约 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'  ); 

                  }); 

所有这一切都是获取网格内的列，然后检查它当前是否隐藏(如果是，那么它将显示它，否则它将隐藏它)

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

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