javascript - 处理剑道网格中列的模板

Question

我一直在尝试在 kendoGrid 中的一个字段的模板中使用 if 和 else。我有两个字段“StatusDesc”和“newStatusDesc”。我想将其中一个值显示为 anchor 标记。这显示正常，但如果你注意到为 anchor 标记定义的 onclick，它有一个来自网格本身的字段，因为它必须打开另一个页面但是当我点击 anchor 标记时，我的浏览器控制台显示:

uncaught ReferenceError: WEW6101 is not defined

实际上，如果我检查 Firebug ，它会显示以下值设置为我的 anchor 标记参数，这是正确的，但我无法调用函数“WEW6101”

onclick='openStatusReload(WEW6101)

  $("#Grid").kendoGrid({
        dataSource: TUEDataSource,
        autoBind: false,
        scrollable: false,
        sortable: {
            allowUnsort: false
        },
        //filterable: { mode: "row", style: "max-width:100px;" },
        //groupable: true,
        pageable: {
            refresh: true,
            buttonCount: 5,
            pageSizes: 5
        },
        dataBound: gridDataBound,
        columns:
            [
                { field: "newStatusDesc", hidden: true },
            { field: "StatusDate", title: "Status Date", width: 200, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
            { field: "Status", title: "Status", width: 150, filterable: { cell: { showOperators: true } } },
            { field: "LimitedDate", title: "Expiration Date", format: "{0:MM/dd/yyyy}", width: 150, filterable: { cell: { showOperators: true } } },
            {
                field: "StatusDesc", title: "Comments", width: 150,
                template: "#if(StatusDesc == '' && newStatusDesc!='' && newStatusDesc!= null  ) {#<a href='javascript:void(0)' class='margin-right10' onclick='openStatusReload(#=newStatusDesc#)'> #:newStatusDesc#</a>#} else{##:StatusDesc##}#", filterable: { cell: { showOperators: true } }
                // template: "<a href='javascript:void(0)' class='margin-right10' onclick='openPlayerTUEStatusReload(#=Tue_StatusDesc#)'>#=TueStatusDesc#</a>", filterable: { cell: { showOperators: true } }
            },
            ]
    });

Answer 1

根据@Quantastical 的评论，您缺少文本周围的引号，这是导致问题的原因，但以下答案可能有助于解决这个问题以及您需要使用剑道网格进行的任何 future 模板 .

我认为这个 dojo 可以帮助您:http://dojo.telerik.com/AVeBU

我发现像这样进行内联模板可能很困难，因此更喜欢提取方法并使用像 kendo 提供的模板引擎或像您所做的那样制作 html。

根据您提供的内容，我对您的专栏进行了以下更改:

 { field: "StatusDesc", title: "Comment", width: "130px" ,
   template: "#=generateLink(data)#" }

在这里，我将行的 dataItem 传递给调用此代码的名为 generateLink 的函数:

function generateLink(data) {
  var ret = '';

  if (data.StatusDesc === '' && data.newStatusDesc !== '' && data.newStatusDesc !== null) {

    var linkElement = 'openStatusReload("' + data.newStatusDesc + '")';

    ret = "<a href='javascript:void(0)' class='margin-right10' onclick='" +
           linkElement + "'>" + data.newStatusDesc + '</a>';

    console.log(ret);

  } else {
    ret = data.StatusDesc;
  }

  return ret;
}

所有这一切都应用了与您相同的逻辑，但允许您使用 native javascript 而不是必须使用 #= {some javascript in here} 解释突破的剑道小部件#

这样，如果您需要修改代码，它更容易阅读和更改，而不必弄清楚可能缺少哪个#。

在我的示例中，我的代码只是弹出一个警告框，其中包含传入的值并记录到控制台，因此您可以看到正在发生的 magic。

希望这会有所帮助，但如果您有任何更改/解释更好，请告诉我，我会相应地更新我的答案。