Question

我正在使用Kendo UI以网格格式呈现数据。在网格中有一列状态，其中可以包含已完成，错误，正在进行等的值。现在为了使其更方便，我想使用图像来表示它。如果是单个图标，我可以在COLUMNS数组中使用以下代码：

columns:[
{
    field: "oper",
    title: "Operation"      
},
{
    field: "exedate",
    title: "Date"
},
{
    field: "status",
    title: "Status",
    template: '<img src="/resources/icons/user_green.png"/>
}]

但是现在，如何根据我无法找到的状态值来表示多个图标和条件？

Answer 1

如果传递函数，则可以控制模板。

{
   field: "status",
   title: "Status",
   template: function(dataRow){

         var icon = 'red.png'

         switch(dataRow.status){
             // Assign here the icon as you please.
         }

         return '<img src="/resources/icons/' + icon + '"/>';
   }
}

另一个解决方案是将CSS类定义为不同的状态。

.statusicon.good
{
   background: url('green.png')
}

.statusicon.bad
{
   background: url('red.png')
}

然后只需在模板中渲染css类。

{
    field: "status",
    title: "Status",
    template: '<div class="statusicon #: status #"></div>
}

Kendo Grid - 在同一列中使用不同的图标

1 个答案: