handsontable是一款页面端的表格式交互插件,可以通过她加载显示表格内容,能够支持合并项、统计、行列拖动等。
同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。
我在项目中有用到了这款插件。
使用目的:实现报表配置功能中,对报表字段设定多表头信息,支持多表头的配置和修改。先给一个截图:
以下内容为handsontabel的基础用法步骤及说明。
一、引入handsontable的js和css文件。一个Demo(可以直接使用css和js)
二、基础应用
页面端放入一个div,用于绑定和展示handsontable数据
<div id="topFieldDiv" style="width: 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=\"width: 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);//加载
View Code
这里需要对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");
View Code
3、handsontabel数据交互
var $container = $("#topFieldDiv");
var handsontable = $container.data('handsontable');//获取当前handsontable
var data = handsontable.getData();//获取所有值
var mergeCellArr = handsontable.mergeCells.mergedCellInfoCollection;//获取合并项目
var colHeadArr = handsontable.getColHeader();//获取表头集合
View Code
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参考网址
以下网址中,部分内容会有些错误,主要是在参考他们的写法和一些属性、方法文档
爱吃西红柿
handsontable常规配置的中文API
handsontable 合并单元格
风火一回
Handsontable 学习笔记-Methods
jQuery仿Excel表格编辑功能的实现代码
jquery.handsontable 获取编辑后的数据
handsontable 属性汇总