html+handsontable实现excel表格简易版—

html+handsontable实现excel表格简易版——demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
  <title>Document</title>
  <style>
    #example {
      margin: 50px 0 0;
    }
  </style>
</head>

<body>
  <div id="example"></div>
</body>
<script>
  const data = [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    [true, 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ];

  const container = document.getElementById('example');
  const hot = new Handsontable(container, {
    data: data,
    rowHeaders: true, //默认为序号  
    // rowHeaders: ['ID', 'Name', 'Address'], // 每列的标题，如果不够，则用大写字母补充
    startRows: 10,//行列范围
    startCols: 6,
    minRows: 5,  //最小行列
    minCols: 5,
    maxRows: 20,  //最大行列
    maxCols: 20,
    // rowHeaders: true,//行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。
    colHeaders: ['选择', '类目', '日期', 'A选项', 'B选项', 'C选项', 'D选项', '答案',],//自定义列表头or 布尔值
    minSpareCols: 2, //列留白
    minSpareRows: 2,//行留白
    // currentRowClassName: 'currentRow', //为选中行添加类名，可以更改样式
    // currentColClassName: 'currentCol',//为选中列添加类名
    autoWrapRow: true, //自动换行
    contextMenu: {
      items: {
        "row_above": {
          name: '上方插入一行'
        },
        "row_below": {
          name: '下方插入一行'
        },
        "col_left": {
          name: '左方插入列'
        },
        "col_right": {
          name: '右方插入列'
        },
        "hsep1": "---------", //提供分隔线
        "remove_row": {
          name: '删除行',
        },
        "remove_col": {
          name: '删除列',
        },
        "make_read_only": {
          name: '只读',
        },
        "borders": {
          name: '表格线'
        },
        "copy": {
          name: '复制'
        },
        "cut": {
          name: '剪切'
        },
        "commentsAddEdit": {
          name: '添加备注',
        },
        "commentsRemove": {
          name: '取消备注',
        },
        "freeze_column": {
          name: '固定列',
        },
        "unfreeze_column": {
          name: '取消列固定',
        },
        "undo": { name: "撤销" },
        "redo": { name: "恢复" },
        "hsep2": "---------",
      }
    },
    manualColumnFreeze: true, //手动固定列  ?
    manualColumnMove: true, //手动移动列
    manualRowMove: true,   //手动移动行
    manualColumnResize: true,//手工更改列距
    manualRowResize: true,//手动更改行距
    comments: true, //添加注释  ?
    cell: [  //???
      { row: 1, col: 1, comment: { value: 'this is test' } },
    ],
    customBorders: [],//添加边框
    columnSorting: true,//排序
    stretchH: 'all',//根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
    fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"
    fixedColumnsLeft: 2,//固定左边列数
    fixedRowsTop: 2,//固定上边列数
    mergeCells: [   //合并
      // {row: 1, col: 1, rowspan: 3, colspan: 3},  //指定合并，从（1,1）开始行3列3合并成一格
      // {row: 3, col: 4, rowspan: 2, colspan: 2}
    ],
    columns: [     //添加每一列的数据类型和一些配置
      { type: 'checkbox' },  //多选框
      {},
      {
        type: 'date',   //时间格式
        dateFormat: 'YYYY-MM-DD',
        correctFormat: true,
        defaultDate: '19000101'
      },
      {
        type: 'dropdown', //下拉选择
        source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
        strict: false   //是否严格匹配
      },
      { type: 'numeric' },  //数值
      {
        type: 'numeric',
        readOnly: true  //设置只读
      },
      {
        type: 'numeric',
        format: '$ 0,0.00'
      },  //指定的数据格式
      {},

    ],
  });
</script>
</html>