剑道网格 - 在同一列中使用不同的图标答案

【问题标题】：Kendo Grid - Using Different Icon in same Column剑道网格 - 在同一列中使用不同的图标
【发布时间】：2015-02-17 08:16:53
【问题描述】：

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

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

但是现在，如何表示多个图标以及基于我无法找到的状态值的条件？

【问题讨论】：

提前感谢，如果可能的话，如果有人可以分享任何链接或可用的演示。

标签： kendo-ui kendo-grid

【解决方案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>
}

【讨论】：

当用户单击该图标时，如何捕获 onClick 事件。另外我需要调用一个 JS 函数并从 dataRow 传递数据，那么怎么做呢？当前的实现是：attributes:{onclick:"onClickEvent(event);"}
不要这样做...使用 jQuery 事件委托。如果您的网格容器名为#grid，您可以声明一个单击处理程序，如下所示：$('#grid').on('click', '.statusicon', function(domElement){ })