Question

我尝试在出现的单元格和行上的kendo网格上添加动画，但不能。

我想添加每行的单元格的动画，以便在最后一行之后显示。

搜索和谷歌搜索有很多结果detailRow我不想要。更多关于dataBound的文章，在单元格和数据显示之后发表。

我想在所有细胞上添加效果，一个接一个地出现。

这是angularjs rtl标准项目

<div  id="grid" class="k-rtl" kendo-grid="grid" k-options="mainGridOptions" k-rebind="mainGridOptions">

与此页面中的Console.log一样，其来源here

但是我们希望看起来像剑道网格：

   MATRIX:[0,0] then [0,1] then .... then [0,N]

   [1,0] then [1,1] then .... then [1,N]

   ...

   [M,0] then [M,1] then .... then [M,N]

Answer 1

我可以提供基于jQuery的解决方案，因为基本上角度应用程序的方法应该相同：

以隐藏网格开始
在数据绑定事件
在Databound事件中显示每一行的每个单元格以及setTimeout函数，以提供动画效果。

请查看下面的代码段作为示例 [注意：使用visibility：hidden css属性，因为父级上的display：none将不允许你显示子级]

<div id="grid" style="visibility: hidden"></div>

<script>
$("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: true,
    columns: [
        { field: "productName" },
        { field: "category" }
    ],
    dataBound: gridDataBound,  
    dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
    ]
});

function gridDataBound(e){
  $(".k-grid-header").css("visibility", "visible");

  var rows = $("#grid").data("kendoGrid").items();
  var columnNumber = $("#grid").data("kendoGrid").columns.length;
  var animationSpeed = 500;

  $.each(rows, function(index, row){    
    setTimeout(function(){        
      $.each($(row).find("td"), 

             function(i, cell){                 
                        var interval = animationSpeed / columnNumber * i;
                        setTimeout(function(){
                        $(cell).css("visibility", "visible");
                        }, interval);
             });

     }, animationSpeed * index)
  });
}
</script>

kendo网格单元格在每个单元格中都显示动画，每行都像单人纸牌一样

1 个答案: