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

【问题标题】：Kendo UI Grid handling missing values in column templatesKendo UI Grid 处理列模板中的缺失值
【发布时间】：2015-06-23 05:26:34
【问题描述】：

我使用 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>'

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

【问题讨论】：

标签： javascript kendo-ui kendo-grid kendo-template

【解决方案1】：

代替：

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

你应该使用：

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

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

你可以在下面的sn-p中看到它运行

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

【讨论】：