handsontable是一款页面端的表格式交互插件，可以通过她加载显示表格内容，能够支持合并项、统计、行列拖动等。
同时，支持对加载后的表格页面的处理：添加/删除行/列，合并单元格等操作。
我在项目中有用到了这款插件。
使用目的：实现报表配置功能中，对报表字段设定多表头信息，支持多表头的配置和修改。先给一个截图：
以下内容为handsontabel的基础用法步骤及说明。
一、引入handsontable的js和css文件。一个Demo(可以直接使用css和js)
二、基础应用
页面端放入一个div，用于绑定和展示handsontable数据
<div id="topFieldDiv" style=" 100%; height: 100%; overflow-y: hidden;overflow-x: hidden"></div>
js内容部分如下：
var $container = $("#topFieldDiv"); //判断div是否存在，若存在则删除 if ($container.length > 0) { $container.remove(); } //添加handsontable的div $("#tbTopFieldJson").after("<div id="topFieldDiv" style=" 100%; height: " + window.innerHeight * 0.6 + "px; overflow-y: hidden;overflow-x: hidden;display:none "></div>"); //#endregion $("#topFieldDiv").handsontable({ data: data, colHeaders: colHeadArr,//设置列头 manualRowResize: true,//自定义行宽 manualColumnResize: true,//自定义列高 manualColumnMove: true,//是否能拖动列 //manualRowMove: false,//是否能拖动行 columnSorting: false,//false/对象 //当值为true时，表示启用排序插件 //rowHeaders: false,//是否显示行数字 contextMenu: true,//右键显示更多功能, columns: cols, autoColumnSize: true, mergeCells: setmergeCells //加载合并项 }); //注释以下语句，改成上面的handsontable中直接去赋值data //以下语句会造成：最后一个列在往前拖动过程中会消失(┬＿┬) $("#topFieldDiv").handsontable("loadData", data);//加载
这里需要对js部分做几点说明：
1、我这里承载handsontabel的div的ID为topFieldDiv，大家可以看到我是先判断该div是否存在，若存在会先删除，然后再添加div标签。从代码上看有点冗余、多此一举
这样做的原因为：在本项目中因为会涉及对当前表格多次编辑和修改，会历经几次交互过程，如果直接在原div上做再次的数据绑定，会出现绑定的列信息位置错乱，而首次加载是不会出现列信息错位的情况。
2、对已有div进行数据绑定，语法为：
$("#topFieldDiv").handsontable({
colHeaders: colHeadArr,//设置列头
...
});
前期在网上查找相关案例，给出的案例均是全局变量方式，都是对全局的handsontabel变量做操作，而本项目不希望以全局方式来交互，故采用了以上方式来加载表格。
全局方式语法如下：
var container = $("#topFieldDiv"); var hot = new Handsontable(container, { data: data, colHeaders: ['日期', '地点', '商品', '单价'], // 使用自定义列头 manualRowResize: true,//自定义行宽 manualColumnResize: true,//自定义列高 ... }); //使用hot var data = hot.getData(); var s = hot.getColHeader(); //var cols = hot.getDataAtProp("name"); var ce = hot.getDataAtRowProp(3, "id");
3、handsontabel数据交互
var $container = $("#topFieldDiv"); var handsontable = $container.data('handsontable');//获取当前handsontable var data = handsontable.getData();//获取所有值 var mergeCellArr = handsontable.mergeCells.mergedCellInfoCollection;//获取合并项目 var colHeadArr = handsontable.getColHeader();//获取表头集合
4、handsontabel部分属性说明
$("#topFieldDiv").handsontable({
data: data,//为需要绑定数据集合
colHeaders: colHeadArr,//设置列头显示-集合，格式：['日期', '地点', '商品', '单价']
manualRowResize: true,//自定义行宽
manualColumnResize: true,//自定义列高
manualColumnMove: true,//是否能拖动列
//manualRowMove: false,//是否能拖动行
columnSorting: false,//当值为true时，表示启用排序插件
//rowHeaders: false,//是否显示行数字
contextMenu: true,//右键显示更多功能,
columns: cols,//设置表格列头。格式[{data:"列1"},{data:"列2"}...]
autoColumnSize: true,
mergeCells: setmergeCells //加载合并项。注意：集合变量名取名不能和属性名mergeCells一致
});
5、单独绑定handsontabel的数据data
$("#topFieldDiv").handsontable("loadData", data);//加载
不建议使用loadData方式来进行表格赋值，因为这样会出现一个问题：在进行列位置拖动时，如果被拖动的列是末尾列，则在把末尾列向前面列拖动后，会出现被拖动的末尾列消失情况
三、用到的handsontabel参考网址
以下网址中，部分内容会有些错误，主要是在参考他们的写法和一些属性、方法文档