import Seniortable from "seniortable";

const ST = new Spreadsheet(document.querySelector('#seniortable'));
ST.loadData({}); // 加载数据
ST.onChange(data => {
  // 检测到数据变化时可以保存到数据库
});

// 默认配置项
{
  showGrid: true,
  view: {
    height: () => document.documentElement.clientHeight,
    width: () => document.documentElement.clientWidth,
  },
  row: {
    len: 100,
    height: 25,
  },
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60,
  },
  style: {
    bgcolor: '#ffffff',
    align: 'left',
    valign: 'middle',
    textwrap: false,
    strike: false,
    underline: false,
    color: '#0a0a0a',
    font: {
      name: 'Helvetica',
      size: 10,
      bold: false,
      italic: false,
    },
  },
}

开发环境

git clone https://github.com/wanglong6/seniortable.git
cd seniortable
npm install
npm run dev

打开浏览器访问 http://127.0.0.1:8080

API 参考手册

公有方法

方法	说明
loadData(data) _{@param json data - 数据}	载入全部数据
getData()	获取全部数据
undo()	撤销
redo()	重做
render()	渲染重绘表格
getCell(ri, ci) _{@param integer ri - 行索引} _{@param integer ci - 列索引}	获取单元格数据
getSelected()	获取当前选择的单元格坐标数据
insertRows(sri, n) _{@param integer sri - 起始行} _{@param integer n - 插入行数}	从起始行向上插入行
insertColumns(sci, n) _{@param integer sci - 起始列} _{@param integer n - 插入列数}	从起始列向左插入列
deleteRows(sri, eri) _{@param integer sri - 起始行索引} _{@param integer eri - 结束行索引}	删除行
deleteColumns(sci, eci) _{@param integer sci - 起始列索引} _{@param integer eci - 结束列索引}	删除列
setText(ri, ci, text) _{@param integer ri - 行索引} _{@param integer ci - 列索引} _{@param string text - 文本}	设置单元格文本
setStyle(sri, sci, eri, eci, property, value) _{@param integer sri - 起始行索引} _{@param integer sci - 起始列索引} _{@param integer eri - 结束行索引} _{@param integer eci - 结束列索引} _{@param string property - 属性} _{@param string value - 值}	设置单元格样式，见`附录2`
merge(range) _{@param Range range - 选区对象}	合并单元格
unmerge(range) _{@param Range range - 选区对象}	拆分选中的单元格
formulaSelectedCell()	选中的单元格计算公式
freeze(ri, ci) _{@param integer ri - 行索引} _{@param integer ci - 列索引}	冻结指定行和列，设置(0,0) 可以解除冻结

附录1. 单元格属性列表

属性	值	说明
font-name	string	文本字体
font-size	8 ~ 20	文本字号（单位像素）
font-bold	true / false	字体是否加粗
font-italic	true / false	文本是否斜体
underline	true / false	文本是否有下划线
strike	true / false	文本是否有删除线
color	#FFFFFF	文本颜色十六进制码
bgcolor	#FFFFFF	单元格背景颜色十六进制码
align	left / center/ right	文本水平对齐方式
valign	top / middle/ bottom	文本垂直对齐方式
textwrap	true / false	文本是否自动换行
border	{...}	边框样式对象 `附录2`

附录2. 单元格边框样式对象

属性	值	说明
mode	all / inside / horizontal / vertical / outside / top / bottom / left / right	边框模式
style	thin / medium / thick / dashed / dotted	边框样式
color	#FFFFFF	边框颜色十六进制码

公有事件

事件	回调参数	说明
onChange(cb)	`$1` 全部数据	单元格内容改变时触发
onKeyDown(cb)	`$1` 事件对象	表格存在焦点时键盘按下时触发

浏览器支持

Modern browsers (chrome, firefox, Safari)

开源许可证

GNU General Public License

Keywords

javascript spreadsheet canvas