摘要:
最近做的一个功能需要配置表格,其中包括了对于表格的各种操作,比如合并单元格、删除行列等一些类似Excel的操作。然后发现了Handsontable的插件。该开源项目在github上有9k多star,还不错,基本能满足大部分操作。其原理是将所有的对于表格的操作都有对应的属性。
一:安装
此次对于PC和APP均使用了,该项目有对应的React插件。
npm install handsontable
对于普通的页面使用该插件下载完整包后,需要导入一个handsontable.full.js文件和handsontable.full.css文件。
二:使用
1. React使用
在页面首先引入改插件:
引入成功后即可像一般组件一样使用<HotTable>
2.普通页面使用
new Handsontable(container, {});
第一个参数是改插件放在哪个dom节点上,第二个参数是一个对象,用来设置表格的各个参数。
三:各配置项解释
data: 存储表格内的数据,数组类型[["a", "b", "c"], ["a", "b", "c"], ["a", "b", "c"]]。
colHeaders、rowHeaders: 是否显示表头,boolean类型数据,默认true
mergeCells: 所有合并单元格的信息,数组对象
readOnly: 是否只读,默认fasle
colWidths: 列宽
rowHeights: 行高
height: 表格高度
width: 表格宽度
fixedColumnsLeft: 固定前几列
cells:所有的单元格渲染,可以对于特殊的单元格的渲染进行特殊处理
afterChange: 单元格内容被修改后调用的方法,有一个参数changes,改对象包含了修改前后的信息
contextMenu: 右键的快捷菜单,有items和callback,分别是右击时选择的菜单信息和回调函数,可以自定义操作
contextMenu={{items: {
"row_above": {
name: '向上方插入一行',
},
"row_below": {
name: '向下方插入一行',
},
"col_left": {
name: '向左侧插入一列',
},
"col_right": {
name: '向右侧插入一列',
},
"remove_row": {
name: '删除行',
disabled: () => {
let result = false;
if(selectCell['r'] != selectCell['r2']) {
return true;
}
mercells.map((merge, idx) => {
if(selectCell['r'] <= (merge['row'] + merge['rowspan'] - 1) && selectCell['r'] >= merge['row'] && merge['rowspan'] != 1) {
result = true;
}
});
return result;
}
},
"remove_col": {
name: '删除列',
disabled: () => {
let result = false;
if(selectCell['c'] != selectCell['c2']) {
return true;
}
mercells.map((merge, idx) => {
if(selectCell['c'] <= (merge['col'] + merge['colspan'] - 1) && selectCell['c'] >= merge['col'] && merge['colspan'] != 1) {
result = true;
}
});
return result;
}
},
"mergeCells": {
name: '合并单元格',
},
"unmerCells": {
name: '取消合并',
disabled: () => {
if(selectCell['r'] == selectCell['r2'] && selectCell['c'] == selectCell['c2']) {
return true;
}
else {
return false;
}
}
},
"fixColumn": {
name: '固定列',
disabled: () => {
return this.state.fixColumn != 0;
}
},
"unFixColumn": {
name: '取消固定列',
disabled: () => {
return this.state.fixColumn == 0;
}
}
},
callback: (key, options) => {
if(key == 'unFixColumn') {
this.setState({
fixColumn: 0
});
this.props.changeFixed(0);
}
else if(key == 'unmerCells') {
mercells.map((item, idx) => {
if(item['row'] == options['start']['row'] && item['col'] == options['start']['col']) {
mercells.splice(idx, 1);
}
});
this.props.changeMerge(mercells);
this.setState({
mergeMsg: mercells
});
}
}}}
maxCols: 最大列数
afterSelection: 选择单元格后,参数(r, c, r2, c2)分别是选择开始和结束的单元格的行和列
disableVisualSelection: 选择单元格后的边框不变色,也可以理解为不能选中单元格