在 Kendo UI Grid 行中添加 HTML 元素？答案

【问题标题】：Adding HTML element in Kendo UI Grid row?在 Kendo UI Grid 行中添加 HTML 元素？
【发布时间】：2014-05-17 21:27:14
【问题描述】：

我有一些来自 JSON 的网格，这是我的代码示例：

JAVASCRIPT

var orders = [{
  OrderID : 10248,
  CustomerID : "<i class='fa fa-car'></i>",
  EmployeeID : 5,
  OrderDate : new Date(1996, 6, 4, 0, 0, 0, 0),
  RequiredDate : new Date(1996, 7, 1, 0, 0, 0, 0),
  ShippedDate : new Date(1996, 6, 16, 0, 0, 0, 0),
  ShipVia : 3,
  Freight : 32.3800,
  ShipName : "Vins et alcools Chevalier",
  ShipAddress : "59 rue de l'Abbaye",
  ShipCity : "Reims",
  ShipRegion : "",
  ShipPostalCode : "51100",
  ShipCountry : "<i class='fa fa-car'></i>"
}, {
  OrderID : 10249,
  CustomerID : "TOMSP",
  EmployeeID : 6,
  OrderDate : new Date(1996, 6, 5, 0, 0, 0, 0),
  RequiredDate : new Date(1996, 7, 16, 0, 0, 0, 0),
  ShippedDate : new Date(1996, 6, 10, 0, 0, 0, 0),
  ShipVia : 1,
  Freight : 11.6100,
  ShipName : "Toms SpezialitГ¤ten",
  ShipAddress : "Luisenstr. 48",
  ShipCity : "MГјnster",
  ShipRegion : "",
  ShipPostalCode : "44087",
  ShipCountry : "Germany"
},  {
  OrderID : 11077,
  CustomerID : "RATTC",
  EmployeeID : 1,
  OrderDate : new Date(1998, 4, 6, 0, 0, 0, 0),
  RequiredDate : new Date(1998, 5, 3, 0, 0, 0, 0),
  ShippedDate : null,
  ShipVia : 2,
  Freight : 8.5300,
  ShipName : "Rattlesnake Canyon Grocery",
  ShipAddress : "2817 Milton Dr.",
  ShipCity : "Albuquerque",
  ShipRegion : "NM",
  ShipPostalCode : "87110",
  ShipCountry : "USA"
}];


$(document).ready(function () {
  $("#rowSelection").kendoGrid({
    dataSource: {
      data: orders,
      pageSize: 7,
      resizable: true,
    },
    sortable: {
      mode: "single",
      allowUnsort: false
    },
    selectable: "multiple",
    pageable: {
      buttonCount: 5
    },
    scrollable: true,
    navigatable: true,
    columns: [
      {
        field: "ShipCountry",
        title: "Ship Country" ,
        width: 200
      },
      {
        field: "Freight",
        width: 200
      },
      {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:dd/MM/yyyy}"
      }
    ]
  });
});

我得到了这样的东西

没关系，但是我需要在单元格中添加图像并更改颜色，这是我需要的图片吗？

这只是一个例子，我需要在那个单元格中添加一些我的 HTML 标记吗？

我知道我可以只绑定表格，但这样我就不会在表格上分页？

这是我用来绑定的 http://demos.telerik.com/kendo-ui/web/grid/index.html

仅如何在表格中添加自定义 HTML，并带有分页？

【问题讨论】：

标签： json kendo-ui kendo-grid

【解决方案1】：

如果您希望 HTML 在列中呈现，您必须关闭 encoding。

如果设置为 true，则列值将在显示之前进行 HTML 编码。如果设置为 false，则列值将按原样显示。默认情况下，列值是 HTML 编码的。

来自Kendo Documentation

$(document).ready(function(){
  $("#rowSelection").kendoGrid({
    //...
    columns: [
      {
        field: "ShipCountry",
        encoded: false
      }
    ]
  });
});

【讨论】：