Question

我使用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>'
        }]
});

在这个例子中，网格效果很好并且显示缺少＆＃34; a＆＃34;第一行中的值为空单元格。

使用列模板时：

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

它在控制台中显示错误：未捕获的ReferenceError：a未定义。甚至用以下代码替换模板：

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

表达式没有用，所以我必须在构造表之前手动将缺失值设置为空字符串。有办法避免这个吗？

Answer 1

而不是：

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

您应该使用：

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

其中data由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>

Kendo UI Grid处理列模板中的缺失值

1 个答案: