前端类似excel框架 handsontable

主页资源可免费下载 handsontable-v6.2.2

先看结果

code

 <div id="example"></div>
    var handsonId = 'example';
    initHandsonTable(handsonId);

    function initHandsonTable(handsonId) {
        var container = document.getElementById(handsonId);
        hot = new Handsontable(container, {
            width: 900,
            height: 640,
            // colWidths: 130, // 单元格宽
            // rowHeights: 30, // 单元格高
            minRows: 50, // 初始化行
            minCols: 11, // 初始化列
            rowHeaders: true, // 显示行号
            colHeaders: true, // 显示列号
            contextMenu: true, // 右击显示菜单
            language: 'zh-CN', // 语言
            manualColumnResize: true, // 列拉伸
            manualRowResize: true, // 行拉伸
            currentRowClassName: 'currentRow', // 行自动增宽
            currentColClassName: 'currentCol', // 列自动增高
            fixedColumnsLeft: 0, // 移动设备自动启用移动编辑和选择模式
            fixedRowsTop: 0,  // 移动设备自动启用移动编辑和选择模式
            mergeCells: [ // 合并单元格
                {row: 0, col: 0, rowspan: 1, colspan: 7}
            ],
            className: "htMiddle htCenter", // 单元格元素垂直居中
        });
        // 表头赋值
        setData(hot);

        function setData(hot) {
            hot.setDataAtCell(0, 0, 'handsontable');
        }

        // 刷新
        hot.render();
    }

数据格式如果跟官网提供的不一样可采用 hot.setDataAtCell()赋值;

更多玩法参考handsontable