由于我这个项目主要是配置多表头信息,主要使用了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}]

二、扩展方法 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;
}

三、扩展方法 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;
}

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

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

handsontable合并项mergeCells应用及扩展的更多相关文章

  1. handsontable 合并单元格

    <!DOCTYPE html> <html> <head> <title>handsontable demo</title> <met ...

  2. handsontable合并表头

    想在页面中做类似excel的操作,发现handsontable符合要求. 然后发现这个文章 http://blog.csdn.net/wynan830/article/details/9054195 ...

  3. 关于 Windows 10 如何扩展分区与合并分区

    前言 相信大部分人都遇见磁盘不够用的问题吧,然后都在后悔当初为什么就给 x 盘分了 10G 的容量吧. 不过没关系,自从 Windows 7 开始( xp 我也不知道有毛有),Windows 自带的磁 ...

  4. handsontable的基础应用

    handsontable是一款页面端的表格式交互插件,可以通过她加载显示表格内容,能够支持合并项.统计.行列拖动等. 同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作. 我在项目 ...

  5. handsontable 拖动末尾列至前面列位置,被拖动列消失的问题

    问题描述:将最后一列在往前面列位置进行拖动后,被拖动的最后列消失掉了. 解决办法:在handsontabel绑定中去设置data值,取消通过 loadData 绑定data $("#topF ...

  6. handsontable 属性汇总

    常规属性: 1.固定行列位置 fixedRowsTop:行数 //固定顶部多少行不能垂直滚动 fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动 2.拖拽行头或列头改变行或列的大小 ...

  7. Visual Studio 2017 扩展

    Visual Studio 2017 扩展 Visual Studio 2017 15.4.4 : 目前是最新的版本号,所有的工具&插件都支持这个版本号.所以请对号入座. ReSharper  ...

  8. Visual Studio 2017 插件扩展

    “工具善其事,必先利其器!装好这些插件让vs更上一层楼” ReSharper : 首先的是Resharper,这个基本是目前是我开发过程中必备的工具集,唯一的缺点就是吃内存,所以你的内存要是低于8G, ...

  9. [转]handsontable常规配置的中文API

    原文地址:http://blog.csdn.net/mafan121/article/details/46050049 常规配置: 1.固定行列位置 fixedRowsTop:行数 //固定顶部多少行 ...

随机推荐

  1. python-备忘录模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 一个成熟的软件应当允许用户取消不确定的操作或者从错误的状态中恢复过来.复制,粘体 ...

  2. lamp配置多个虚拟站点

    在同一ip下添加多个域名站点! 1.查看ip 命令:ifconfig 2.添加域名 命令:vi /etc/hosts 输入域名:如 192.168.160.127   www.test.com 192 ...

  3. 【代码笔记】iOS-plist获得城市列表

    一,工程图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...

  4. cmd--命令短集

    查看ip地址:ipconfig 查看ip地址:ipconfig/all 进入c盘program files目录下:cd %Program Files%,”x:“, 进入x盘根目录.cd “ ”进入某文 ...

  5. 存折打印机测量和毫米方式Form配置说明

    一.打印一把尺子(单位:mm) 存折打印机测试程序:D:\Inspur\InspXfs\Bin\InspPassbook\NuDevPassbookTest.exe .) 二.测量存折(横向和纵向) ...

  6. 大数据【一】集群配置及ssh免密认证

    八月迷情,这个月会对大数据进行一个快速的了解学习. 一.所需工具简介 首先我是在大数据实验一体机上进行集群管理学习,管理五台实验机,分别为master,slave1,slave2,slave3,cli ...

  7. 【Redis】Redis学习(五) Redis cluster模式详解

    一般情况下,使用主从模式加Sentinal监控就可以满足基本需求了,但是当数据量过大一个主机放不下的时候,就需要对数据进行分区,将key按照一定的规则进行计算,并将key对应的value分配到指定的R ...

  8. SQL Server中事务transaction如果没写在try catch中,就算中间语句报错还是会提交

    假如我们数据库中有两张表Person和Book Person表: CREATE TABLE [dbo].[Person]( ,) NOT NULL, ) NULL, ) NULL, [CreateTi ...

  9. 自己实现more命令

    #include <stdio.h> #include <stdlib.h> #define PAGELEN 24 #define LINELEN 512 int see_mo ...

  10. 购物商城学习--第二讲(maven工程介绍)

    接下来第二讲介绍整体工程如何使用maven搭建的. 使用maven管理工程的好处: jar包的管理: 工程之间的依赖管理: 自动打包 maven常见打包方式:jar.war和pom三种.jar工程,是 ...