由于我这个项目主要是配置多表头信息,主要使用了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. 【代码笔记】iOS-SDWebImage的使用

    一,工程图. 二,代码. RootViewController.m #import "RootViewController.h" //加入头文件 #import "UII ...

  2. JavaSE——打印流

    打印流: 类PrintStream: PrintStream 为其他输出流添加了功能,使它们能够方便地打印各种数据值表示形式.它还提供其他两项功能.与其他输出流不同,PrintStream 永远不会抛 ...

  3. SAP Overview

    SAP的全称:       Anwendungen Produkte in der Datenverarbeitung (德文,这是原西德产品),翻译成英文就是:System,Applications ...

  4. Jmeter 测试结果分析之聚合报告简介

    Jmeter 测试结果分析之聚合报告简介 by:授客 QQ:1033553122 聚合报告(aggregate report) 对于每个请求,它统计响应信息并提供请求数,平均值,最大,最小值,错误率, ...

  5. ubuntu更新下载源问题

    Q1:ubuntu14.04系统安装完之后无法跟新并安装插件 cd /var/lib/apt/lists sudo rm * -rf sudo apt-get clean;sudo apt-get u ...

  6. 【Python】控制鼠标点击

    from pymouse import PyMouse m = PyMouse() a = m.position() #获取当前坐标的位置 print(a) m.move(50, 500) #鼠标移动 ...

  7. Oracle EBS CST 成本请求报错

    (文档 ID 430533.1) When running CMCPAW, Periodic Actual Cost Worker,  an error is received in the logf ...

  8. Keil下载时出现program fail错误的一个原因

    在使用Keil给STM32单片机编程的时候有时会出现Programing Failed!对于这样的错误网上有很多的教程,错误的原因也有很多,比如是单片机上锁,环境配置错误的原因导致.这里我将提供一种错 ...

  9. Node.js环境搭建和学习(windwos环境)

    Node.js环境搭建和学习 一.环境搭建 1.下载安装文件 下载地址http://nodejs-org.qiniudn.com/下载Node.js环境安装包,根据操作系统下载对应的安装包 下载地址 ...

  10. python os模块 遍历目录

    #os #os ->tree命令 import os #递归 #目录 ->文件,文件夹 -> 文件文件夹 dirpath = input('请输入你要遍历的目录\n') def ge ...