Question

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

现在，数据看起来像这样[{“a”：4，“b”= 35，...}，{...}，....]我也有每个元素的类型但不是然后保存在数据网格中。

Answer 1

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

request is malformed

然后在行模板上，你可以在kendo-angular2 reference detail row template中使用它作为类（查看cell1，cell2，cell3，cell4属性）：

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
    }
}

然后添加css

<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>

dojo

中的工作示例

Kendo UI网格Anuglar细胞颜色

1 个答案: