Question

我想在标题单元格中输入两行（或更多行）文本。我知道在网格中可视化文本换行，但我不会总是有长文本，此外，包装文本也不会以多行导出到excel工作表。我希望换行符在文本中的特定位置，在网格和导出的Excel工作表中都是可视的。

例如，在我提供的示例中，我希望能够在导出期间去掉<br> html并让导出创建一个多行标题。

所以，如果我有以下kendo-grid标题：

我希望excel导出看起来像这样：

而是输出<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/excel-export"> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.material.min.css" /> <script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.318/js/jszip.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script> <link rel="stylesheet" href="style.css" type="text/css" /> <style> html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } .k-grid-header .k-header { white-space: normal !important; } </style> </head> <body> <div id="example"> <div id="grid" style="width: 900px"></div> <script> $("#grid").kendoGrid({ toolbar: ["excel"], excel: { fileName: "Kendo UI Grid Export.xlsx", proxyURL: "http://demos.telerik.com/kendo-ui/service/export", filterable: true }, excelExport: (e) => { //let width for exported columns auto set e.workbook.sheets[0].columns.forEach((col) => { col.autoWidth = true; }); }, dataSource: { type: "odata", transport: { read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" }, schema: { model: { fields: { UnitsInStock: { type: "number" }, ProductName: { type: "string" }, UnitPrice: { type: "number" }, UnitsOnOrder: { type: "number" }, UnitsInStock: { type: "number" } } } }, pageSize: 7 }, sortable: true, pageable: true, columns: [ { width: "35%", field: "UnitPrice", title: "Unit Price and some very loooong text that will make this line wrap. Not what I am looking for. Plus it doesn't export in multilines either.", }, { width: "30%", field: "UnitsOnOrder", title: "Units On Order" }, { width: "35%", field: "UnitsInStock", title: "Units In Stock <br> (Excludes foreign)" }] }); </script> </div> </body> </html>：

此处是Plunker http://plnkr.co/edit/v3TYgA?p=preview

Plunker代码

$('.timeline-next').click(function() {
  var $this = $(this).closest(".timeline-item");
    $this.fadeOut(400, function(){
      $this.next(".timeline-item").fadeIn(400); 
    });
});

Answer 1

使用标题模板可能会有更好的结果：

columns:[{
            width: "35%",
            field: "UnitsInStock",
            title: "Units In Stock ",
            headerTemplate: "Units In Stock <br> (Excludes foreign)"   
        }]

Answer 2

如果您希望“ <br/>”标签像Kendo Grid中的HTML一样工作/执行，则需要使用“ column.encoded”属性。官方文档：https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.encoded

页面上也有一个DOJO链接，这是一个很好的例子。

如何在标题单元格中使用多行将kendo网格导出为excel

2 个答案:

如何在标题单元格中使用多行将kendo网格导出为ex​​cel

2 个答案:

如何在标题单元格中使用多行将kendo网格导出为excel