GridManager 導出

zsy888 發布于2019-08-22 17:14 / 3053人閱讀

摘要：導出的后綴名默認為導出處理器函數該函數需要返回一個。是否僅導出選中的項默認為注意事項無法導出所有數據，僅可對當前顯示的數據進行導出。如果存在導出全部的功能，需要自行實現。

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

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

var table = document.querySelector("table[grid-manager="demo-export"]")
table.GM({
    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 "點擊跳轉";
            }
        },{
            key: "action",
            remind: "the action",
            width: "100px",
            text: "操作",
            template: function(action, rowObject){
                return "編輯";
            }
        }
    ]
});

渲染完成后，通過 exportGridToXls 方法進行調用

GridManager.exportGridToXls("demo-export", fileName, onlyChecked)

table: 需要操作的table 或 table的gridManagerName值
fileName: 導出后使用的文件名，如果不設置將使用插件配置項gridManagerName。
onlyChecked：是否僅導出選中的項, 默認為false

注意事項

無法導出所有數據，僅可對當前顯示的數據進行導出。如果存在導出全部的功能，需要自行實現。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94984.html

分享表格組件-GridManager

摘要：優勢純原生實現，不依賴任何框架使用簡單快捷，功能強大與用戶進行溝通，采納來自于使用的需求，并不間段的進行升級維護特色功能表格的列寬度可進行拖拽式調整表格的列位置進行拖拽式調整可通過配置對列進行顯示隱藏轉換在表存在可視區域的情況下表頭將一直存 GridManager showImg(https://segmentfault.com/img/bV4Mff?w=1146&h=538); 優勢...

KaltZK 2019-08-22 15:02 評論0 收藏0
React 表格組件 GridManager-React

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。刷新更新查詢條件其它更多請直接訪問查看當前版本的版本的版本 GridManager React 基于 React 的 GridManager 封裝, 用于便捷的在 React 中使用GridManager. 除過React特性外，其它API與GridManager API相同。 showImg(https://segmentfault...

cyixlq 2019-08-23 18:04 評論0 收藏0
表格組件 GridManager Angular 1.x

摘要：非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。前端雞湯前端框架前端相關篩選選中項，字符串默認為。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封裝, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 評論0 收藏0
Vue表格組件--GridManager Vue

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。并且使用服務需要提前通過將注冊至全局組件。刷新或更新查詢條件或其它更多請直接訪問查看當前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridManag...

khs1994 2019-08-23 16:46 評論0 收藏0
GridManager 開源歷程

摘要：歷程啟動于年月日不曾想這一堅持已經多天了。每個午飯后晚飯前。期間對的認知與實踐提升明顯，并沉淀下名為的類庫。每次發布前的，成為一種風險把控。在此之前從沒有如此的認同單元測試，也相信這終將會成為一種大家都遵守的契約。 GridManager歷程 GridManager 啟動于2015年02月10日, 不曾想這一堅持已經1200多天了?？傁霝榇擞涗浶┦裁?，但一直未曾動手。午飯后，公司很安靜...

honhon 2019-08-22 18:48 評論0 收藏0