GridManager 导出

zsy888 发布于2019-08-22 17:14 / 3050人阅读

摘要：导出的后缀名默认为导出处理器函数该函数需要返回一个。是否仅导出选中的项默认为注意事项无法导出所有数据，仅可对当前显示的数据进行导出。如果存在导出全部的功能，需要自行实现。

导出功能现在分为两种模式: 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, 那么导出即使生效也无法通过界面操作。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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