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');//获取当前handsontablevar 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

handsontable合并项mergeCells应用及扩展相关推荐

web前端数据表格有合并项的一种简单实现方法
今天一个同学在QQ里问,如何实现前端数据表中有合并项的效果, 在QQ里打字说不清楚,于是写了一个简单的例子说明问题, 现在记录下来,以备后用: 先写一个基本的html页面: <!DOCTYPE ...
列表合并变种题,map()函数扩展
列表合并变种题题目: 有a,b两个列表,长度不定,将两个列表和并成一个列表,对位元素相加,不丢弃任何一个元素例如: a= [1,2,3] b = [1,2,3,4]# 则结果为 c = [2, 4 ...
恢复U盘未分配空间怎么合并，u盘分区扩展卷不显示怎么办
1.先把u盘插到电脑,在开始菜单输入运行:cmd 2.输入diskpart,然后回车 3.再输入list disk,然后回车,这时就能看到这台电脑的所有磁盘大致情况,u盘一般是磁盘1; 4.再输入se ...
关于 Windows 10 如何扩展分区与合并分区
前言相信大部分人都遇见磁盘不够用的问题吧,然后都在后悔当初为什么就给 x 盘分了 10G 的容量吧. 不过没关系,自从 Windows 7 开始( xp 我也不知道有毛有),Windows 自带的磁 ...
table中同一列中合并相同项
实现效果实现方法: 1.使用table中提供的合并方法spanMethod spanMethod({row, column, rowIndex, columnIndex}) {if (column. ...
bootstrap table合并单元格mergeCell
//对应第一个合并的单元格 mergeCells = function(data, fieldName, colspan, target) { var sort = Array(); ...
搜索引擎核心技术与算法 —— 词项词典与倒排索引优化
一只小狐狸带你解锁NLP/ML/DL秘籍作者:QvQ 老板-我会写倒排索引啦!我要把它放进咱们自研搜索引擎啦! 我呸!你这种demo级代码,都不够当单元测试的! 嘤嘤嘤,课本上就是这样讲的呀?! 来 ...
用于React，React Native，JavaScript和生产力的顶级VSCode扩展
I've used VSCode full-time since 2016. Before I was using Visual Studio and I was looking for lighte ...
VS2017必备的插件扩展
"工具善其事,必先利其器!装好这些插件让vs更上一层楼" ReSharper : 首先的是Resharper,这个基本是目前是我开发过程中必备的工具集,唯一的缺点就是吃内存,所以 ...

handsontable合并项mergeCells应用及扩展

handsontable合并项mergeCells应用及扩展相关推荐

最新文章

热门文章