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);//加載

這里需要對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參考網址

以下網址中，部分內容會有些錯誤，主要是在參考他們的寫法和一些屬性、方法文檔

愛吃西紅柿 

handsontable常規配置的中文API

handsontable 合並單元格

風火一回

Handsontable 學習筆記-Methods

jQuery仿Excel表格編輯功能的實現代碼

jquery.handsontable 獲取編輯后的數據

handsontable 屬性匯總