GridManager 匯出功能

baukh789發表於2019-04-18

匯出功能現在分為兩種模式: static, blob

初始化時指定啟用匯出功能。方式如下:

<table></table>
複製程式碼
var table = document.querySelector('table')
table.GM({
    gridManagerName: 'demo-export',
    ajax_url: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajax_type: 'POST',
    supportAjaxPage: true,
    supportExport:true, // 配置啟用匯出功能， 預設即為true
    exportConfig: {
       // 匯出的方式: 預設為static
       // 1.static: 前端靜態匯出, 無需後端提供介面，該方式匯出的檔案並不完美。
       // 2.blob: 通過後端介面返回二進位制流。`nodejs`可使用`js-xlsx`, `java`可使用 `org.apache.poi`生成二進位制流。
       mode: 'static',
    
       // 匯出的字尾名 , 預設為`xls`
       suffix: 'xls',
    
       // 匯出處理器函式,該函式需要返回一個promise。當`exportType`為`static`時，該引數不生效。
       handler: (fileName, query, pageData, sortData, selectedList) => {
          // 需要通過promise中的resolve()返回二進位制流(blob)，有兩種返回格式:
          // 1.resolve(blob), 2.resolve({data: blob})
          return new Promise(); 
    
       }
    },
    query: {pluginId: 1},
    i18n: 'en-us',
    columnData: [
        {
            key: 'name',
            text: 'name'
        },{
            key: 'info',
            text: 'info'
        },{
            key: 'url',
            text: 'url',
            template: function(url, rowObject){
                return '<a style="color:#337ab7;" href="'+url+'" target="_blank">點選跳轉</a>';
            }
        },{
        key: 'action',
        remind: 'the action',
        width: '100px',
        text: '操作',
        template: function(action, rowObject){
            return '<a style="color:#337ab7;" href="javascript:;" onclick="testEditFN()" learnLink-name="'+rowObject.name+'">編輯</a>';
        }
    }]
});
複製程式碼

渲染完成後，通過 exportGridToXls 方法進行呼叫

GridManager.exportGridToXls('demo-export', fileName, onlyChecked)
複製程式碼
exportGridToXls方法，引數說明:

  • table: 需要操作的table 或 table的gridManagerName值

  • fileName: 匯出後使用的檔名，如果不設定將使用外掛配置項gridManagerName。

  • onlyChecked：是否僅匯出選中的項, 預設為false

注意事項

  • mode = static: 前端靜態匯出,無需後端提供介面，該方式匯出的檔案並不完美，建議使用blob方式。

  • 匯出功能的操作介面為右鍵選單，如果在初始化時配置 supportMenu=false, 那麼匯出即使生效也無法通過介面操作。

相關文章