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}]
二、扩展方法 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应用及扩展的更多相关文章
- handsontable 合并单元格
<!DOCTYPE html> <html> <head> <title>handsontable demo</title> <met ...
- handsontable合并表头
想在页面中做类似excel的操作,发现handsontable符合要求. 然后发现这个文章 http://blog.csdn.net/wynan830/article/details/9054195 ...
- 关于 Windows 10 如何扩展分区与合并分区
前言 相信大部分人都遇见磁盘不够用的问题吧,然后都在后悔当初为什么就给 x 盘分了 10G 的容量吧. 不过没关系,自从 Windows 7 开始( xp 我也不知道有毛有),Windows 自带的磁 ...
- handsontable的基础应用
handsontable是一款页面端的表格式交互插件,可以通过她加载显示表格内容,能够支持合并项.统计.行列拖动等. 同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作. 我在项目 ...
- handsontable 拖动末尾列至前面列位置,被拖动列消失的问题
问题描述:将最后一列在往前面列位置进行拖动后,被拖动的最后列消失掉了. 解决办法:在handsontabel绑定中去设置data值,取消通过 loadData 绑定data $("#topF ...
- handsontable 属性汇总
常规属性: 1.固定行列位置 fixedRowsTop:行数 //固定顶部多少行不能垂直滚动 fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动 2.拖拽行头或列头改变行或列的大小 ...
- Visual Studio 2017 扩展
Visual Studio 2017 扩展 Visual Studio 2017 15.4.4 : 目前是最新的版本号,所有的工具&插件都支持这个版本号.所以请对号入座. ReSharper ...
- Visual Studio 2017 插件扩展
“工具善其事,必先利其器!装好这些插件让vs更上一层楼” ReSharper : 首先的是Resharper,这个基本是目前是我开发过程中必备的工具集,唯一的缺点就是吃内存,所以你的内存要是低于8G, ...
- [转]handsontable常规配置的中文API
原文地址:http://blog.csdn.net/mafan121/article/details/46050049 常规配置: 1.固定行列位置 fixedRowsTop:行数 //固定顶部多少行 ...
随机推荐
- Angular环境搭建
Angular4 随笔(一)----环境搭建 1.下载node.js 第一步:在浏览器中搜索node.js官网(https://nodejs.org/zh-cn/),根据自己系统下载相应版本,下载完成 ...
- 使用PeopleSoft 异步操作设置步骤
在手机端调PS接口或同步数据到中间库等程序中经常用到异步操作. 在主菜单>PeopleTools>集成代理程序>集成设置中添加了服务和服务操作后需要设置以下3步才能完成异步程序: 1 ...
- JavaScript实现时间查询
首先要引入js文件和css文件 <script src="jquery-1.11.2.min.js"></script> <script src=&q ...
- Win7/8/10十个最强大通用快捷键
Windows 操作系统功能丰富,可视化的界面能够帮助我们提高工作效率.不过,日常使用中,很多用户都习惯“一只鼠标走天下”,频繁的点击让手指疲惫不堪. 为此,我们总结了十个适用于 Windows 7 ...
- [Android] ACTION_GET_CONTENT与ACTION_PICK的区别
参考:AndroidSDK/docs/reference/android/content/Intent 看到相关代码,对这两个参数的区别有点搞不清. 原文地址请保留http://www.cnblogs ...
- 《Javascript权威指南-第6版》
第3章 类型.值和变量 3.2 文本 3.2.1 字符串直接量 建议:在javascript中使用单引号表示字符串,在HTML中使用双引号表示字符串; 3.2.2 转义字符 \n 换行符 \r 回车符 ...
- JSP 过滤器
JSP教程 - JSP过滤器 JSP过滤器是可用于拦截来自客户端的请求或处理来自服务器的响应的Java类. 过滤器可用于执行验证,加密,日志记录,审核. 我们可以将过滤器映射到应用程序部署描述符文件w ...
- 您还在用下一步下一步的方式安装SQLSERVER和SQLSERVER补丁吗?
您还在用下一步下一步的方式安装SQLSERVER和SQLSERVER补丁吗? 介绍 假如你有50台服务器需要安装SQLSERVER,如果你用下一步下一步的方式,用远程桌面不停切换,那个效率... 大家 ...
- pt-osc原理、限制、及与原生online-ddl比较
1. pt-osc工作过程 创建一个和要执行 alter 操作的表一样的新的空表结构(是alter之前的结构) 在新表执行alter table 语句(速度应该很快) 在原表中创建触发器3个触发器分别 ...
- django —— 邮件
官方文档 1.11 配置settings.py # QQ邮箱为例, 其他邮箱对应的SMTP配置可查官方 EMAIL_HOST = "smtp.qq.com" EMAIL_PORT ...