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:行数 //固定顶部多少行 ...
随机推荐
- python学习之老男孩python全栈第九期_day009之文件操作总结
# 文件处理# 打开文件# open('路径','打开方式', '指定编码方式')# 打开方式:r w a 可读可写:r+ 可写可读:w+ 可追加可读:a+ b# r+ :打开文件直接写,和读完再写 ...
- 【代码笔记】iOS-UIActionSheet字体的修改
一,效果图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIVi ...
- postman获取全局
1.获取token接口时,在test里面输入如下语句 postman.clearGlobalVariable("token"); var jsonData = JSON.parse ...
- <Android 基础(三十三)> TabHost ~ 仿微信底部菜单
简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...
- 检测到在集成的托管管道模式下不适用的ASP.NET设置
解决方法是修改web.config如下: <system.webServer> <validation validateIntegratedModeConfiguration=&qu ...
- vue-router 手势滑动触发返回
vue-router的路由变换只存在“变换前”和“变换后”,不存在“切换中”的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟随手指移动.但滑动事件还是可以监听的,我们可以在滑动之后再触 ...
- 安卓基础之Activity的生命周期
Activity的生命周期 onCreate 在Activity被创建时调用 onDesdroty 在Activity销毁时调用 onRestart 在Activity重新打开时调用 onStart ...
- PRD文档怎么写
昨天学习PMP的相关文档,正好看到里面讲的PRD文档是怎么写的 就把一些学习过程,思维方式,还有用到的工具给记录下来 方便自己以后需要的时候,再去查阅,再读这个教程的时候,我顺便用脑图画了一下 脑图工 ...
- Oracle EBS AP 应付核销到确定一行预付款
-- purpose: 应付标准发票核销预付款发票中的一行 -- 12.2.6 环境 -- author:jenrry create_date: 2017-06-08 declare l_error_ ...
- JavaScript获取请求参数
<script type="text/javascript"> //获取请求参数 function paramsMap() { var url = window.loc ...