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

Question

我使用 Kendo UI 网格来显示数组数据，其中对象缺少某些字段。这是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>'

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

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 网格处理列模板中的缺失值

Kendo UI Grid handling missing values in column templates

javascript

kendo-ui

kendo-grid

kendo-template