onloadsuccess: function获取不到表格数据_电子表格Handsontable Flask简单应用

一、Handsontable简介
Handsontable Community Edition (CE) 是一个开源的 JavaScript 电子表格组件，提供类似于Excel的UI组件，它集成并提供了各种有用的功能，如数据绑定、验证、排序和强大的上下文，它可以处理大量数据而无需担心性能问题。
官网地址:https://handsontable.com/

二、快速开始
1.在head中引入handsontable.css, handsontable.js

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>

2.在body中初始化handsontable表格

<div id="hot"></div>
<script type="text/javascript">
  var colHeaders = ['来源', 'ID', '类型', '备注']
  var container = document.getElementById('hot');
  var hot = new Handsontable(container,
    {
      colHeaders: colHeaders,
      rowHeaders:true,
      startRows: 20,
      startcol:4,
      maxCols: 4,
      maxRows:100,
      colWidths:100
    });
</script>

其中参数colHeaders列标题、rowHeaders行标题，规定行列名，true/false参数控制默认显示ABC，123开启
startRows初始行数，startcol初始列数，maxCols最大列数，maxRows最大行数，colWidths列宽
colWidths可由列表形式[50,60,30,80]形式定义，
stretchH：last/all/none //last:延伸最后一列,all:延伸所有列,none默认不延伸
可定义 data 由列表[[1,2,3]，[4,5,6]…]形式传入初始数据

三、从 handsontable表格保存和加载数据
可通过ajax形式实现视图函数与html页面之间的通信1.保存功能
1)javascript实现ajax上传到视图函数中

Handsontable.dom.addEvent(document.getElementById("save"), "click", function() {
    var arr = { data: hot.getData()};
    $.ajax({
    url: '/json/save',
    type: 'POST',
    data: JSON.stringify(arr),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: true,
    success: function(msg) {
        console.log(msg);
      }
      });
    hot.clear()
    });

通过getData()方法获得表中数据，绑定事件”click”，当按下Id为”save”的element时，通过ajax以post的方式传递json格式数据给视图函数，最后调用clear()方法清除页面中的数据
此处我踩了坑，addEvent在浏览器中报错显示不存在，检查后发现，dom写法有误，在较新版本的Handsontable中，dom首字母小写，老版本中为Dom

2)flask实现保存的视图函数

@app.route('/json/save', methods = ['POST'])
def jsonSave():
    jsonData = request.get_json()
    data = jsonData['data']
    return json.dumps(True)

以flask视图函数为例，通过上下文获取json格式数据，get_json()方法将它转化为Python标准格式

2.加载功能
1)javascript实现ajax加载视图函数提供的数据到html页面

Handsontable.dom.addEvent(document.getElementById("load"), 'click', function() {
    var arr = { data: []};
    $.ajax({
    url: '/json/load',
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(arr),    
    dataType: 'json',
    async: true,
    success: function(msg) {
        hot.loadData(msg.data);
        console.log('Loaded:');
        console.log(msg.data);
    }
    });
});

与保存方法类似，触发绑定事件，通过get请求获取视图函数路由’/json/load’中返回的数据，显示在表格中

1)flask实现加载的视图函数

@app.route('/json/load', methods = ['GET'])
def jsonSave():
    data_source = data_source()
    data = {'data':data_source}
    return json.dumps(data)

视图函数中返回的json数据格式需与JavaScript方法中定义的一致，即{ data: []}格式