强大的表格组件gridmanager，支持vue react jquery angular

• 列的宽度可调整
• 列的顺序可调整
• 列可配置显示隐藏
• 用户刷新后，宽度、顺序、显示状态要保持
• 支持右键下载
• 支持复制单元格内容
• 可以打印当前页
• 行数据可以上下移动

GridManager不仅有gridmanager-vue，还有gridmanager-react, 还有gridmanager-angular-1.x。

哪怕当前项目是上古项目，还可以直接使用支持jQuery的原生js版本gridmanager。

这只是GridManager的部分功能，除此之外还有固定表头、固定列、国际化、表头过滤等常见表格功能。

 github地址：https://github.com/baukh789/GridManager

GridManager - API 

讲讲vue怎么使用吧

先引gridmanager-vue，并完成基本的配置。

// vue template


// vue js
import GridManager from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
Vue.use(GridManager);

const app = new Vue({
    el: '#app',
    data: {
        tableOption:{
            gridManagerName: 'table-key', // 必填项，全局唯一
            columnData:[
               {
                   key: 'pic',
                   text: '缩略图'
               },
               {
                   key: 'title',
                   text: '标题'
               },
               // ....其它列信息
            ]
        }
    }
});

基本工作完成后，就可以通过配置tableOption来实现产品经理所需的功能。

列的宽度可调整 API

tableOption: { supportAdjust: true, // 默认开启 // ...其它配置 }

列的顺序可调整 API 

tableOption: { supportDrag: true, // 默认开启 // ...其它配置 }

 列可配置显示隐藏 API

tableOption: { supportConfig: false， //默认开启 configInfo: '配置列的显示状态', // 配置区域的描述信息 // ... 其它配置项 }

用户刷新后，宽度、顺序、显示状态要保持 API 

tableOption: { disableCache: false, // 默认记忆功能为禁用 // ... 其它配置项 }

支持右键下载 API 

tableOption: {
    supportExport: true, // 默认开启
    exportConfig: {
       // 导出的方式: 默认为static
       // 1.static: 前端静态导出, 无需后端提供接口，该方式导出的文件并不完美。
       // 2.blob: 通过后端接口返回二进制流。`nodejs`可使用`js-xlsx`, `java`可使用 `org.apache.poi`生成二进制流。
       // 3.url: 通过配置或由后端返回下载地址
       mode: 'static',

       // 导出文件的名称, 字符串或函数类型，为函数时需返回一个字符串。该字符串不包含后缀名，该值不设置将默认使用gridManagerName
       // 参数query为当前查询的参数
       fileName: (query) => {
           return '下载的文件名称';
       },

       // 导出的后缀名, 可选项['xls', 'csv'], 默认为`xls`
       suffix: 'xls',

       // 导出处理器函数, mode === 'static'时可以选择性配置该项，其它mode必须配置
       // fileName： 导出文件名
       // query: 查询参数
       // pageData: 分页数据
       // sortData: 排序数据
       // selectedList: 当前选中的数据
       // tableData: 当前页数据
       handler: (fileName, query, pageData, sortData, selectedList, tableData) => {
          // mode === 'static': handler函数return 二维数组，若未正确返回数组则使用当前DOM进行导出
          // return [["title", "content", "createData"],["typescript", "this is typescript", "2015-01-01"]]

          // mode === 'blob': handler函数需要返回resolve(blob)的promise
          // 需要通过promise中的resolve()返回二进制流(blob)，有两种返回格式:
          // 1. return new Promise(resolve => {resolve(blob)});
          // 2. return new Promise(resolve => {resolve({data: blob})});

          // mode === 'url': handler函数需要返回url或返回resolve(url)的promise
          // 1. return 'xxx.xxx.com/xxx.xls';
          // 2. return new Promise(resolve => {resolve('xxx.xxx.com/xxx.xls')})
       }
    },
    // ... 其它配置项
}

支持复制单元格内容 API 

tableOption: { useCellFocus: true, // ... 其它配置项 }

打印当前页 API 

tableOption: { supportPrint: true. // ... 其它配置项 }

行数据可以上下移动 API 

tableOption: {
   supportMoveRow: true,
   moveRowConfig: {
      // 指定移动后需要更新的字段, 该字段未配置时将只对DOM进行更新
      key: 'priority',

      // 单列移动模式: 为true时将生成单独的一列
      useSingleMode: false,

      // 列固定: 仅在单列移动模式下生效, 如果右侧存在固定列则该列必须配置为left
      fixed: undefined,
      
      // 移动后执行的程序，可在该程序中完成与后端的交互
      handler: (list, tableData) => {
         console.log(list, tableData);
      }
   },
   // ...其它配置项
}