关于javascript:产品经理天马行空表格组件应对自如

前端表格组件，大略是 pc 端中应用最频繁的组件，也是产品经理 (个别还兼理 UE,EX) 最能折腾的一个组件。
福兮祸兮，在折腾中磨炼了许多年后，表格组件成为我在圈内惟一敢用精通来形容的技术点。

产品经理天马行空

尽管没几个人把产品当作经理，但 Product Manager 直译过去如同还真是这个意思。

产品递给我一份需要文档，并随口来了一句三进展的话:“新增个列表加搜寻，简略很，今天能上吧？”
我拿起沾满污渍的咖啡杯，深深的品了一口。如果你仅仅认为我是渴了，那就浮浅了，要晓得嘴也是栈构造的，不等我这口悠长的咖啡品完，我是不会许可今天上线的。

这是程序员最初的倔强。

然而，在我许可后的几分钟内就悔恨了，因为在不满一屏的需要文档中，有一多半是对于表格的交互形容:

• 列的宽度可调整
• 列的程序可调整
• 列可配置显示暗藏
• 用户刷新后，宽度、程序、显示状态要放弃
• 反对右键下载
• 反对复制单元格内容
• 能够打印当前页
• 行数据能够高低挪动(本次非必做)

看着最初一条表格交互后的本次非必做，我打动的不敢动。

表格组件应答自若

产品虐我千百遍，我待产品如初恋
首先这是一个 Vue 我的项目，所以先引 gridmanager-vue，并实现根本的配置。

// vue template
<grid-manager :option="tableOption"></grid-manager>

// 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);
      }
   },
   // ... 其它配置项
}

对于框架

真不巧，我用的是 React 框架。
还真巧，GridManager 不仅有 gridmanager-vue，还有 gridmanager-react, 还有 gridmanager-angular-1.x。

哪怕以后我的项目是上古我的项目，还能够间接应用反对 jQuery 的原生 js 版本 gridmanager。

另外

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

喜爱的话，就给 gridmanager 点个 star 吧。