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:行数 //固定顶部多少行 ...
随机推荐
- Google 翻译(中英,英中)
网上找了好久, 终于弄好了, 免费的谷歌翻译,直接上代码,不懂留言: //翻译 app.get('/google', function (req, res, next) { var content = ...
- MongoDB数据库在centos下的操作
简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库 ...
- 【读书笔记】iOS-网络-保护网络传输
一,验证服务器通信. 二,HTTP认证. 手机银行应用有两种认证模式:标准验证与快速验证.标准验证只是提示用户输入用户名与密码,而快速验证则让用户注册设备,然后使用PIN进行验证,每次验证时无需用户名 ...
- 解决The type 'ASP.global_asax' exists in both ASP.global_asax同时存在问题
习惯发布站点的同学有时候可能遇见以下错误 这是发布时[预编译勾选/不勾选]产生的文件冲突导致的 如果不勾选预编译会发布以下代码 如果勾选预编译会发布以下代码 错误就在于此,如果非预编译Global.a ...
- 编译64位cu文件的设置
作者:朱金灿 来源:http://blog.csdn.net/clever101 CUDA(ComputeUnified Device Architecture),是显卡厂商NVIDIA推出的运 ...
- Android /data/local/tmp目录的好处
在Android中,访问data目录一般需要root权限,但是有个另外那就是/data/local/tmp目录. 注意: (1)cd /data/local/tmp可以打开这个目录,而不是一级一级目 ...
- Expo大作战(十二)--expo中的自定义样式Custom font,以及expo中的路由Route&Navigation
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- python常用内置模块
#持续更新 #在使用内置模块的时候需要导入,例如import abc,则导入abc模块,当然模块也可以自己写,相当于一个类,后面放到类里说,这个因为环境闲置,有些无法执行,只能理解了 #os系统操作 ...
- 一起学习Boost标准库--Boost.texical_cast&format库
今天接续介绍有关字符串表示相关的两个boost库: lexical_cast 将数值转换成字符串 format 字符串输出格式化 首先,介绍下lexical_cast ,闻其名,知其意.类似C中的at ...
- 乘风破浪:LeetCode真题_024_Swap Nodes in Pairs
乘风破浪:LeetCode真题_024_Swap Nodes in Pairs 一.前言 这次还是链表的操作,不过我们需要交换链表奇数和偶数位置上的节点,因此要怎么做呢? 二.Swap Nodes i ...