Kendo UI 网格角单元格颜色答案

【问题标题】：Kendo UI Grid Anuglar Cell ColorKendo UI 网格角单元格颜色
【发布时间】：2017-08-03 08:03:31
【问题描述】：

我有一个使用 Kendo UI Grid 的 Angular 2 应用程序。我有一个显示一些数据（整数值）的网格。是否可以根据每个单元格的类型对其进行着色？也许根据类型为每个单元格添加 css 类？

现在，数据看起来像这样 [{"a":4,"b"=35,...},{...},....] 我也有每个元素的类型，但没有但保存在数据网格中。

【问题讨论】：

【解决方案1】：

我有一个建议，它仍然是纯 js 剑道的形式（但你应该能够在 Angular 2 剑道中做到这一点），通过使用 schema.parse 或在 angular 2 中：从后端获取数据后 您可以在从 rest 端点检索数据后添加附加字段。在我的情况下，在循环中添加你的逻辑我只是随机分配颜色

schema: {
    parse : function(response){
      var colors = [
          'red',
          'green',
          'blue',
          'yellow'
      ];
      //loop through all you data, add adding aditional field. 
      //also here i randomize the color for each cell
      for(var i = 0; i< response.d.results.length; i++){
        response.d.results[i].cell1 = colors[ Math.floor(Math.random()*colors.length)];
        response.d.results[i].cell2 = colors[ Math.floor(Math.random()*colors.length)];
        response.d.results[i].cell3 = colors[ Math.floor(Math.random()*colors.length)];
        response.d.results[i].cell4 = colors[ Math.floor(Math.random()*colors.length)];
      }

      return response
    }
}

然后在行模板上，您可以在kendo-angular2 reference detail row template 中将其用作这样的类（查看单元格1、单元格2、单元格3、单元格4 属性）：

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr data-uid="#: uid #">
        <td class="photo #=data.cell1#">
           <img src="../content/web/Employees/#:data.EmployeeID#.jpg" alt="#: data.EmployeeID #" />
        </td>
        <td class="details #=data.cell2#">
           <span class="name">#: FirstName# #: LastName# </span>
           <span class="title">Title: #: Title #</span>
        </td>
    <td class="country #=data.cell3#">
            #: Country #
        </td>
        <td class="employeeID #=data.cell4#">
           #: EmployeeID #
        </td>
   </tr>
</script>

然后添加css

<style>
    .red {
      background-color: red;  
    }
    .green {
      background-color: green;  
    }
    .blue {
      background-color: blue;  
    }
    .yellow {
      background-color: yellow;  
    }
</style>

dojo 中的工作示例

【讨论】：