2

我使用 Kendo UI Grid 来显示缺少某些字段的对象的数组数据。这是js代码：

var arr = [{b: "b1"}, {a: "a2", b: "b2"}];

$("#grid").kendoGrid({
    dataSource: arr,
    columns: [
        { 
            title: "The A column",
            field: 'a'
        }, { 
            title: "The B column",
            template: '<i>#=b#</i>'
        }]
});

在此示例中，网格运行良好，并将第一行中缺少的“a”值显示为空单元格。

使用列模板时：

$("#grid").kendoGrid({
    dataSource: arr,
    columns: [
        { 
            title: "The A column",
            template: '<b>#=a#</b>'
        }, { 
            title: "The B column",
            template: '<i>#=b#</i>'
        }]
});

它在控制台中显示错误：Uncaught ReferenceError: a is not defined。甚至将模板替换为：

template: '<b>#=a || ""#</b>'

相反，表达式没有帮助，因此我必须在构建表之前手动将缺失值设置为空字符串。有没有办法避免这种情况？

4

1 回答 1

4

代替：

template: '<b>#=a || ""#</b>'

你应该使用：

template: '<b>#=data.a || ""#</b>'

wheredata由 KendoUI 预定义，等于行数据。否则，JavaScript 不知道它a应该是 的一部分，data并认为它本身是一个引发错误的变量。

您可以在以下代码段中看到它正在运行

$(document).ready(function() {
  var arr = [{b: "b1"}, {a: "a2", b: "b2"}];

  $("#grid").kendoGrid({
    dataSource: arr,
    columns: [
      { 
        title: "The A column",
        template: '<b>#= data.a || ""#</b>'
      }, { 
        title: "The B column",
        template: '<i>#=b#</i>'
      }]
  });
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

<div id="grid"></div>

于 2015-06-23T06:25:45.357 回答