代码之家 › 专栏 › 技术社区 › kpg

带嵌套计算的剑道UI网格列模板-如何?

kendo-template kendo-grid kendo-ui

kpg · 技术社区 · 6 年前

剑道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>"

我把它涂成多层,试图让它看起来好看,但事实并非如此。其想法是,如果种类=0或7,则显示两个按钮,否则不显示。效果很好。

但是,我需要将数据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 回复 | 直到 6 年前

David Lebee 6 年前

你可以用一个函数来代替,我相信它会让事情变得更简单。

您的模板可以是 "#= buildButtons(data) #"

function buildButtons(model) {
    if (model.Kind == 0 || model.Kind == 7) {
        return "hello world";
    }

    return "";
}

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

<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>

推荐文章

Haytham · 来自远程数据的剑道UI条形图系列名称

6 年前

user7678643 · “使用问题”复选框

6 年前

Kenny Lucero · Javascript-JQuery-Kendo-为什么要执行我的函数

6 年前

nineveh.Y · KendoUI add treelist工具栏模板导致“TypeError:(中间值)。toLowerCase不是函数”

6 年前

Zayn malik · 剑道网格自定义按钮的mouseover或mouseenter或onhover事件?

6 年前

CMartins · Kendo UI MVC网格主题更改

6 年前

anand · 仅为叶节点启用复选框

6 年前

firienn · ASP中的剑道网格。Net MVC:防止刷新网格上的数据。设置选项

6 年前

Xion · 剑道排序问题

6 年前

dscythe · 如何删除剑道中复选框中的这些蓝色条/边框

6 年前