merge合并数据_merge的用法「建议收藏」

(1) 2024-05-23 18:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说merge合并数据_merge的用法「建议收藏」,希望能够帮助你!!!。

由于我这个项目主要是配置多表头信息,主要使用了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为一个集合,格式如下:

merge合并数据_merge的用法「建议收藏」_https://bianchenghao6.com/blog__第1张
merge合并数据_merge的用法「建议收藏」_https://bianchenghao6.com/blog__第2张

[{"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(判断是否为合并单元格主项)

merge合并数据_merge的用法「建议收藏」_https://bianchenghao6.com/blog__第1张
merge合并数据_merge的用法「建议收藏」_https://bianchenghao6.com/blog__第2张

//判断是否为合并单元格主项
//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 (获取单元格的合并项父级的值)

merge合并数据_merge的用法「建议收藏」_https://bianchenghao6.com/blog__第1张
merge合并数据_merge的用法「建议收藏」_https://bianchenghao6.com/blog__第2张

//获取单元格的合并项父级的值
//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)方法做了修改:在每次删除行的同时,从合并项集合中清理掉属于该删除行的合并项。修改内容如下:

merge合并数据_merge的用法「建议收藏」_https://bianchenghao6.com/blog__第7张

 

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

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复