在线表格编辑插件handsontable使用

最新推荐文章于 2025-06-01 09:15:22 发布

蓝格子.

最新推荐文章于 2025-06-01 09:15:22 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js技巧文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_35168861/article/details/118193621

js技巧专栏收录该内容

28 篇文章

订阅专栏

这篇博客介绍了如何使用Handsontable这款在线表格编辑插件进行数据展示和操作。通过引入相关JS和CSS文件，设置容器和配置选项，可以创建交互式的表格。同时，提供了导入和导出Excel数据的方法，包括使用xlsx库解析Excel文件并将数据渲染到表格，以及利用现有功能实现数据导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录：handsontable，在线表格编辑插件
地址：https://github.com/handsontable/handsontable

效果：
在这里插入图片描述
使用：

<link rel="stylesheet" href="/static/jsConversion/chartTool/css/jquery.handsontable.full.css">
<script src="/static/jsConversion/chartTool/js/jquery.handsontable.full.js"></script>
//下面是用于导入excel的js
<script src="/static/jsConversion/chartTool/js/xlsx.full.min.js"></script>
<script src="/static/jsConversion/chartTool/js/xlsx.core.min.js"></script>

容器：

<div id="dataTable"></div>

常见方法：

//准备数据
var data = [
      ["2020年", "销售额（万元）"],
      ["第一季度", 120],
      ["第二季度", 158],
      ["第三季度", 201],
      ["第四季度", 280]
    ]
var container = $("#dataTable").handsontable({
      // data: data,
      minRows: 8,
      minCols: 7,
      startRows: 5,
      startCols: 5,
      rowHeaders: true,
      colHeaders: true,
      minSpareRows: 1,
      minSpareCols: 1,
      contextMenu: true,
      manualColumnResize: true,
      useFormula: true
    })
//常用的几种方法
//清楚表格数组
$("#dataTable").handsontable("clear");
//加载渲染数据
$("#dataTable").handsontable("loadData", data);//加载
//获取表格中的数据
var $container = $("#dataTable");
var handsontable = $container.data('handsontable');//获取当前handsontable
var dataAll = handsontable.getData();//获取所有值

excel表格导入渲染

 <input class="choseExcel" style="display: none;" type="file" onchange="importf(this)"
          accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

// excel文件导入

var wb;//读取
var rABS = false;
//开始导入
function importf(obj) {
  if (!obj.files) {
    return;
  }
  var f = obj.files[0];
  var reader = new FileReader();
  reader.onload = function (e) {
    var data = e.target.result;
    if (rABS) {
      wb = XLSX.read(btoa(fixdata(data)), {//手动转化
        type: 'base64'
      });
    } else {
      wb = XLSX.read(data, {
        type: 'binary'
      });
    }
    /**
     * wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
     * wb.Sheets[Sheet名]获取第一个Sheet的数据
     */
    var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    jsonImportTable(excelJson)

  };
  if (rABS) {
    reader.readAsArrayBuffer(f);
  } else {
    reader.readAsBinaryString(f);
  }
}

// 将导入的excel数据渲染到表格中
function jsonImportTable(jsonData) {
  var importData = [];
  var keyArr = [];
  for (var key in jsonData[0]) {
    keyArr.push(key);
  }
  importData.push(keyArr)
  for (var i = 0; i < jsonData.length; i++) {
    var _arr = [];
    for (var j = 0; j < keyArr.length; j++) {
      _arr.push(jsonData[i][keyArr[j]])
    }
    importData.push(_arr);
  }
  $("#dataTable").handsontable("clear");
  $("#dataTable").handsontable("loadData", importData);//加载s
}