Kendo UI Grid - 带有隐藏列和自定义格式的Excel导出

时间:2016-03-07 12:42:40

标签: kendo-ui kendo-grid kendo-ui-grid

我尝试使用Grid组件的内置支持导出到Excel,应用自定义单元格格式,如这些Telerik文档所示:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/cell-format

导出使用硬编码行/单元索引的方法在导出显示先前隐藏列的网格时会出现一个相当明显的问题 - 重现的最佳方法是引用此jsfiddle:

https://jsfiddle.net/3anqpnqt/1/

  1. 跑小提琴
  2. 点击导出到Excel - 观察自定义数字格式
  3. 取消隐藏子类别列(使用列菜单)
  4. 点击导出到Excel - 在第2列观察自定义数字格式,现在是'子类别'
  5. 参考小提琴中的这段代码:

    $("#grid").kendoGrid({
        toolbar: ["excel"],
        excel: {
          fileName: "Grid.xlsx",
          filterable: true
        },
        columns: [
          { field: "productName" },
          { field: "category" },
          { field: "subcategory", hidden: true },
          { field: "unitPrice"}
        ],
        dataSource: [
          { productName: "Tea", category: "Beverages", subcategory: "Bev1", unitPrice: 1.5 },
          { productName: "Coffee", category: "Beverages", subcategory: "Bev2", unitPrice: 5.332 },
          { productName: "Ham", category: "Food", subcategory: "Food1", unitPrice: -2.3455 },
          { productName: "Bread", category: "Food", subcategory: "Food2", unitPrice: 6 }
        ],
        columnMenu: true,
        excelExport: function(e) {      
          var sheet = e.workbook.sheets[0];
    
          for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
            var row = sheet.rows[rowIndex];
            var numericFormat = "#,##0.00;[Red](#,##0.00);-";
            for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
                var cell = row.cells[cellIndex];
                if (row.type === "data") {
                    if (cellIndex == 2) { // how are we able to identify the column without using indexes?
                        cell.format = numericFormat;
                        cell.hAlign = "right";
                    }
                }
            }      
          }      
        }
    });
    

    我需要做的是将单元格识别为单位价格&#39;并应用格式,但在excelExport处理程序中检查对象模型并没有给我任何方式来建立这个链接。在我的实际应用程序中,我有几种自定义格式要应用(百分比,n0,n2等),因此它不像转到$.isNumeric(cell.value)那样简单。

    更新

    我还需要使用解决方案来处理列/行组,这会在Excel模型中生成额外的标题行/列。

1 个答案:

答案 0 :(得分:1)

看起来row [0]是标题行,因此您可以尝试更改

if (cellIndex == 2) {

if (sheet.rows[0].cells[cellIndex].value == "unitPrice") { 

编辑:

似乎可以使用列组:https://jsfiddle.net/dwosrs0x/

更新

工作表的对象模型不是最明确的。在我看到的各种场景中,第一行似乎确实是一个“主”标题行。如果unitPrice不在分组中,这似乎有用。如果unitPrice在分组中,那么涉及组头(row [1])的更复杂的东西可能是可能的。难题是找出所需列最终将占据的位置。

var header = sheet.rows[0];
var upIndex = -1;
var upFound = false;

for (var cellIndex = 0; cellIndex < header.cells.length; cellIndex++) {

    if ('colSpan' in header.cells[cellIndex]) 
        upIndex = upIndex + header.cells[cellIndex].colSpan;
    else 
        upIndex = upIndex + 1;

    if (header.cells[cellIndex].value == "unitPrice") { // wot we want
        upFound = true;
        break;
    }
}

for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
    var row = sheet.rows[rowIndex];
    if (row.type === "data" && upFound) {
        var cell = row.cells[upIndex];
        cell.format = numericFormat;
        cell.hAlign = "right";
    }

}

小组 - https://jsfiddle.net/dwosrs0x/4/

摆弄简单的网格(以证明它仍然有效) - https://jsfiddle.net/gde4nr0y/1/

这肯定会有“躲闪”的味道。