@laomu/handsontable NPM

可编辑公式的表格

公式单元格展示计算结果
点击公式单元格展示并可编辑公式
公式单元格黄色背景
非法数据红色背景
撤销和重做、粘贴等数据更新
调整宽度
禁止编辑状态
数据修改后其他依赖该数据的需要重新计算
菜单改为中文
公式默认展示计算结果，hover时提示公式内容
支持Object对象属性计算
Object对象预览
Object对象属性别名
Object对象删除
Object对象复制
公式中引用另一个单元格的计算结果
自定义对象展示函数
条件表达式
SUM等区域函数
中间插入或删除行或列时，更新所有公式中包含了底部或右侧区域的内容
可下拉选择数据
单元格合并及对齐方式修改存储
外界更新数据时如何更新界面(render函数)
ObjectEditor自定义编辑支持
禁止复制对象
禁止删除对象
避免对象覆盖编辑(可删除后重新编辑)

效果预览

示例（参考src/example.js）

require('@laomu/handsontable/dist/style.css')
const Tabel = require('@laomu/handsontable')
var data = [
    ['说明', '内容', null],
    ['数据', 10, 11],
    ['字符串', 'AAA', ''],
    ['对象', {name: '对象A', value: 123, hide: false}, {name: '对象B', value: 133}],
    ['公式', '=B2+C2'],
    ['错误示例', '=B1+B2'],
    ['对象属性计算', '=B4.value + 1'],
    ['别名计算示例', '=B4.值 + 1'],
    ['不存在的属性', '=B4.notExist'],
    ['公式套公式', '=B5 + 10'],
]

var container = document.getElementById('table')
var hot = new Tabel({
    dom: container,
    data: data,
    // 属性别名
    propAlias: {
        'value': '值'
    },
    // 合并单元格
    mergeCells: [
        {row: 0, col: 1, rowspan: 1, colspan: 2}
    ],
    // 对齐方式
    metas: [
        {row: 0, col: 0, meta: {className: 'htRight'}}
    ],
})

// 需要选择数据时触发
hot.on('dblclick-object', function(row, col, data) {
    console.log('select:', row, col, data);
    setTimeout(() => {
        let value = data.value
        hot.setDataAtCell(row, col, {
            name: '值:' + (value + 1),
            value: (value + 1)
        })
    }, 1000)
});

// 当有数据变化时触发
hot.on('update', function(data) {
    console.log('update:', hot.getDataWithFormat());
})