jsGrid调用exportData导出CSV报错Cannot read property 'apply'如何解决

报错根因与修复方案 #

该错误本质是你调用的exportData方法在当前运行环境中不存在，对应修复方案如下：

• 版本不兼容问题
  jsGrid的exportData方法是v1.5.0版本才正式加入的API，如果你使用的jsGrid版本低于该版本，内核没有对应方法实现，调用时就会抛出该类型错误。修复方式为将jsGrid依赖升级到1.5.0及以上版本。
• 调用时机错误问题
  你在grid配置中开启了autoload: true，数据通过异步接口加载，如果你是在执行initPhotoGrid方法后立刻调用exportData，此时grid实例还未完成初始化、数据也未加载完成，方法调用就会失败。

你可以通过绑定onDataLoaded事件，确保数据加载完成后再执行导出逻辑，修改后的grid配置示例如下：

function initPhotoGrid(imageIds) {
    $("#photoGrid").jsGrid("destroy")
    $("#photoGrid").jsGrid({  
            width: "100%",  
            filtering: false,
            inserting: false,
            editing: false,
            sorting: true,
            paging: false,
            autoload: true,
            // 新增数据加载完成回调
            onDataLoaded: function(args) {
                // 可在此处直接调用导出，或者把导出按钮的启用逻辑放这里
                window.gridDataLoaded = true;
            },
            controller: {
                loadData: function (filter) {
                    var d = $.Deferred();
                    $.ajax({
                        url: `/api/ConstrInspInfo/inspImages?imageIds=${imageIds}`,
                        dataType: "json",
                        data: filter
                    }).done(function (response) {
                        d.resolve(response)
                    }).fail(err => {
                        alert("get intakeReport fail....plz try later")
                        console.log(err.msg)
                    })
                    return d.promise()
                }
            },
            fields: [
                { name: "ReportId", type: "text", visible: false },
                { name: "Addon", title: "time", type: "text"},
                { name: "FilePath", title: "photo", type: "text"},
                { name: "ImageDescription", title: "desc", type: "text"},
            ]
        })
}

手动触发导出时可以先校验实例状态，避免报错：

// 导出前先校验grid实例和数据加载状态
if($("#photoGrid").data("JSGrid") && window.gridDataLoaded) {
    var csv = $("#photoGrid").jsGrid("exportData", {
        type: "csv",
        subset: "visible", 
        delimiter: "|", 
        includeHeaders: true, 
        encapsulate: true, 
        newline: "\r\n",         
        filter: function (item) { return true },
    });
    // 后续处理csv内容的逻辑
}

补充说明：你配置中的subset: "visible"不会导出设置了visible: false的ReportId字段，如果需要导出所有字段，将该参数值改为"all"即可。

内容的提问来源于stack exchange，提问作者Jimmy Hsie