前端表格组件，大概是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);
}
},
// ...其它配置项
}
表格轮播 API
new GridManager(table, {
// 支持表格轮播
supportAutoPlay: true,
autoPlayConfig: {
// 每次轮播结束后停顿的时间, 默认值:5
interval: 5,
// 每帧滚动的距离(px),默认值:40
step: 40
},
// ...其它配置项
});
关于框架
真不巧，我用的是React框架。
还真巧，GridManager不仅有gridmanager-vue，还有gridmanager-react, 还有gridmanager-angular-1.x。
哪怕当前项目是上古项目，还可以直接使用支持jQuery的原生js版本gridmanager。
另外
这只是GridManager的部分功能，除此之外还有固定表头、固定列、国际化、表头过滤等常见表格功能。
喜欢的话，就给gridmanager点个star吧。
