如果剑道 UI 网格模板中的条件答案

【问题标题】：If condition in Kendo UI grid template如果剑道 UI 网格模板中的条件
【发布时间】：2021-09-20 21:18:32
【问题描述】：

field: 'Status' ,
         width: '70px' , 
         template: "#if(Status == 'On Request') {#<div class='redAndBold'>#:Status</div>#}#"

我有一个剑道 UI 网格，其中“状态”是从 javascript 文件中填写的。模型中的状态可以是“On Request”，而我想要的是：如果是“On Request”，则为其添加一个类，“redAndBold”。此特定示例中的语法给出了“未定义用户”错误。

谁能给我一些关于如何正确执行此操作的指示？

【问题讨论】：

在Status 之后缺少#：#:Status#

标签： kendo-ui kendo-grid

【解决方案1】：

kendo.templates 依赖于#=fieldName# 或#:fieldName#。在当前情况下，“状态”后缺少结束“#”。在初始化期间绑定到数据项时，模板会使用字段的值进行评估。对于执行 JavaScript 逻辑，仅使用“#JS 逻辑在这里#”。更多信息可以在这里找到Kendo UI templates。

为避免模板语法混淆，可以使用纯 JavaScript 函数：

template: "#=templateFunc(data)#"

// JS hander
function templateFunc(dataItem){
    if(dataItem.Status== 'On Request') {
        return "<div class='redAndBold'>"+dataItem.Status+"</div>";
    } else{
        return dataItem.Status;
    }
}

【讨论】：

【解决方案2】：

我认为您在 Status 之后缺少#。当你注入一个变量的值时，它需要一个 # 前后。如果在编写时将模板代码拆分为几行，则更容易正确编写。

#if(Status == 'On Request') {#
<div class='redAndBold'>
#:Status#
</div>
#}#

一个很好的检查是计算模板中#符号的数量。它应该始终是偶数。

【讨论】：

非常感谢，使用的方案其实不一样，我加了encoded: false;到专栏并在 javascript 中完成工作。知道这实际上很好，但是要计算 # 符号。欣赏！

【解决方案3】：

正如许多人指出的那样，您缺少一个井号。我想指出，您可以将模板设置为返回字符串的函数。我通常这样做是因为字符串模板存在细微差别，例如转义井号：

field: 'Status',
width: '70px', 
template: function(dataItem) {
  var div = $('<div />');
  if (dataItem.Status === 'On Request') {
    div.addClass('redAndBold');
  }
  return div.prop('outerHTML');
}

【讨论】：