具有嵌套评估的Kendo UI网格列模板 - 如何?

时间:2018-03-14 18:36:11

标签: kendo-ui kendo-grid kendo-template

Kendo UI v2015.2.805

我有一个带有模板列的KendoGrid,它有条件确定是否应该添加一组按钮,如果需要额外的评估,我就无法弄清楚如何嵌套它们。

以下有效,但没有必要的额外评估:

{ field: "Served", title: "Served", 
template: "<div>" + 
"#= (Kind==0 || Kind==7) ? '" + 
"<button type=\"button\" data-id=\"12345\">Yes</button>" + 
"<button type=\"button\" data-id=\"54321\">No</button>" + 
"' : " +  
"'NO BUTTON HERE'" +  
"#</div>"

我多排它以试图让它看起来不错,但事实并非如此。这个想法是,如果Kind = 0或7,则显示两个按钮,否则不显示。效果很好。

但是我需要将data-id评估为#= ID#,所以我尝试:

" <button type=\"button\" data-id=\"' #= ID # '\">Yes</button>"

我知道我需要“删除”引用的字符串以使评估工作,因为我在整个表达式中使用双引号我将条件中的按钮作为单引号字符串返回,因此转义按钮属性,但我无法评估#=。

我已经尝试了很多不同的组合我已经失去了轨道。

这样做的“正确方法”是什么?

解决方案:

接受David的回答,修改后在函数中使用模板评估:

{ field: "Served", title: "Served", 
  template: function (data) {
    switch (data.Kind) {
      case 0:
      case 7:
        var template = kendo.template("<button type='button' data-id='#= ID #' >Yes</button><button type='button' data-id='#= ID #'>No</button>");
        return template(data);
      default:
        return '';
    }
}

让函数执行初始测试会删除一个级别,并允许进行“正常”评估。

1 个答案:

答案 0 :(得分:1)

你可以使用一个函数而我相信它会让事情变得更容易。

您的模板可以是function buildButtons(model) { if (model.Kind == 0 || model.Kind == 7) { return "hello world"; } return ""; }

<div id="grid"></div>
  <script>
  var people = [
    { id: 1, firstName: 'David', lastName: 'Lebee' },
    { id: 2, firstName: 'John', lastName: 'Doe' }
  ];

  $('#grid').kendoGrid({ 
        dataSource: {
        transport: {
            read: function(options) {
            options.success(people);
          }
        }
      },
        columns: [
        { field: 'firstName', title: 'First Name'  },
        { field: 'lastName', title: 'Last Name' },
        { title: 'Actions', template: '#= buildActions(data) #'}
      ]
  });


  function buildActions(model) {
        if (model.firstName == "David") {
        return 'Hello David';
      }

      return '';
  }
  </script>

这是一个代码示例 https://dojo.telerik.com/UQuqAfuv

bash