剑道 ui 网格模板 else if答案

【问题标题】：kendo ui grid template else if剑道 ui 网格模板 else if
【发布时间】：2016-10-18 16:20:02
【问题描述】：

以下代码不起作用。谁能帮我写信和else if 这里的条件？

   function getMyColumns() {
     return [{
       field: "xxx",
       title: "1st",
       width: "75px",
     }, {
       field: "ChoiceCode",
       title: "2nd",
       width: "75px",
       template: "#if(ChoiceCode == null) {# #} else If(mychoice == ChoiceCode) {#" +                                
                                    "{ #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}" +
                                "else {# <span>#=secondChoiceCode#</span> #}" +
                            "#}#"
            }, {
    }];
}

在选择字段中，如果它为空，我想显示一个空字符串，如果它有一个值并且它与我的选择相匹配，我想用绿色突出显示该单元格如果它与我的选择不匹配，请不要突出显示它.

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

如果您将模板内联，它将是这样的：

#if(ChoiceCode == null) {# #} else If(mychoice == ChoiceCode) {# { #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}else {# <span>#=secondChoiceCode#</span> #} #}#

或者更好（故意没有#）：

if(ChoiceCode == null) { } 
else If(mychoice == ChoiceCode) {
    { <div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>
}
else { 
    <span>#=secondChoiceCode#</span> } 
}

发现有问题？我觉得应该是这样的：

if(ChoiceCode == null) { } 
else If(mychoice == ChoiceCode) {
    <div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>
}
else { 
    <span>#=secondChoiceCode#</span>
}

内联版本：

# if(ChoiceCode == null) { # # } else if (mychoice == ChoiceCode) { #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div> # } else { # <span>#=secondChoiceCode#</span> # } #

代码版本：

template: "#if(ChoiceCode == null) {# #} else if(mychoice == ChoiceCode) {#" +                                
          "<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}" +
          "else {# <span>#=secondChoiceCode#</span> #}#";

【讨论】：

非常感谢，很好的解释..我总是不知道如何以及在哪里放置#
@bansi 迷茫的时候，把它写成纯代码，然后加上哈希，再把它加到代码中，就像我上面做的那样，它变得更容易理解了。

【解决方案2】：

就我个人而言，我会更改它，以便更容易阅读和更改。

而不是将所有逻辑放在此处将其拉出到一个函数中，以便您的模板命令看起来像：

template: "#=highlighter(data.ChoiceCode, data.mychoice, data.secondChoiceCode) #"

函数的脚本如下：

         function(choiceCode, myChoice, secondChoiceCode) {
   var retString = '';
   if (choiceCode === null || choiceCode === undefined) {
     retString = '';
   } else if (myChoice === choiceCode) {
     resString = '<div style="background-color:lightgreen;"><span>' +
       choiceCode + '</span></div>'
   } else {
     retString = '<span>' + secondChoiceCode + '</span>';
   }

   return retString;
 }

然后，您可以不必记住各种大括号应该去哪里，并在模板中转义它们。

显然将函数更改为您需要它返回数据的方式，但这是基于我在您提供的原始代码中可以看到的。我假设变量是每一行的绑定模型中的属性。

编辑我添加了以下演示，希望对您有所帮助： http://dojo.telerik.com/ejaqU/2

【讨论】：

感谢您的回复。正如我在之前的评论中提到的，我已经尝试过它给出“未捕获的 ReferenceError：未定义荧光笔”
我正在使用 angularJS
好的，我在我的代码中发现了一个已修复的错误。这是一个演示，向您展示 Angular（我不得不说这不是我的强项）dojo.telerik.com/ejaqU/2
这帮我减轻了负担 - Angular 集成在 Kendo 中毫无用处，所以这对我有用！

【解决方案3】：

可能的错别字

} else If(mychoice == ChoiceCode) {

应该是

} else if(mychoice == ChoiceCode) {

【讨论】：

我尝试创建函数并将登录名放在那里，但也出现错误“未定义未捕获的引用错误 xxx”

【解决方案4】：

您的模板中有一些额外的括号 ({)

试试这个

function getMyColumns() {
        return [{
                {
                field: "xxx",
                title: "1st",
                width: "75px",
            }, {
                field: "ChoiceCode",
                title: "2nd",
                width: "75px",
                template: "#if(ChoiceCode == null) {# #} else if(mychoice == ChoiceCode) {#" +
                        "<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}" +
                        "else {# <span>#=secondChoiceCode#</span> #}#",
            }, {
            }];
    }

【讨论】：