handsontable合并项mergeCells应用及扩展

由于我这个项目主要是配置多表头信息,主要使用了handsontabel合并项功能。

但是,在该功能使用过程中发现了一些问题和一些自己根据需要做的一些扩展


    $("#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 //加载合并项。变量名setmergeCells不能与mergeCells命名一样
    });
这里特别说明下:变量名setmergeCells不能与mergeCells命名一样。一开始变量名取为 mergeCells,没有加载出合并项 被坑了一下

一、获取合并项信息mergeCells.mergedCellInfoCollection

var $container = $("#topFieldDiv");
var handsontable = $container.data('handsontable');//获取当前handsontable

var data = handsontable.getData();//获取所有值
var mergeCellArr = handsontable.mergeCells.mergedCellInfoCollection;//获取合并项目

对handsontabel进行了一系列的合并操作之后,可以通过 xx.mergeCells.mergedCellInfoCollection获得合并项结果。

mergedCellInfoCollection为一个集合,格式如下:

[{"row":0,"col":0,"rowspan":1,"colspan":3},{"row":0,"col":3,"rowspan":1,"colspan":3},{"row":0,"col":6,"rowspan":1,"colspan":3}]
View Code

二、扩展方法 IsMergeMainCell(判断是否为合并单元格主项)

//判断是否为合并单元格主项
//i->行坐标
//j->列坐标
//mergeCellArr->合并项集合
function IsMergeMainCell(i, j, mergeCellArr) {
    var bool = false;

    if (mergeCellArr != null && mergeCellArr.length > 0) {
        for (var k = 0; k < mergeCellArr.length; k++) {
            var curMerCell = mergeCellArr[k];
            if (i == curMerCell.row && j == curMerCell.col) {
                bool = true;
                break;
            }
        }
    }
    return bool;
}
View Code

三、扩展方法 GetParentName (获取单元格的合并项父级的值)

//获取单元格的合并项父级的值
//i->行坐标
//j->列坐标
//mergeCellArr->合并项集合
//handsontable->
function GetParentName(i, j, mergeCellArr, handsontable) {
    var parentName = "";
    if (mergeCellArr != null && mergeCellArr.length > 0) {
        for (var k = 0; k < mergeCellArr.length; k++) {
            var curMerCell = mergeCellArr[k];
            if (curMerCell.row <= i && i <= (curMerCell.row + curMerCell.rowspan - 1) &&
                curMerCell.col <= j && j <= (curMerCell.col + curMerCell.colspan - 1)) {
                parentName = handsontable.getDataAtCell(curMerCell.row, curMerCell.col);
                break;
            }
        }
    }
    return parentName;
}
View Code

四、对表格经历了一番合并、行的删除之后,再次获得合并项集合时,会出现已删除的行合并项仍然存在,与实际合并项信息混杂一起难以区分。

对原生handsontabel的删除行(remove_row)方法做了修改:在每次删除行的同时,从合并项集合中清理掉属于该删除行的合并项。修改内容如下:

 

转载于:https://www.cnblogs.com/senyier/p/7298167.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值