handsontable的基础应用 - 儿时精神

时间：2024-03-08 16:44:40

handsontable的基础应用

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 属性汇总

相关文章