<!DOCTYPE html>

<html>

	<head>

		<title>handsontable demo</title>

		<meta charset="utf-8">

		<link rel="stylesheet" href="css/handsontable.full.css">

		<script src="js/jquery.js"></script>

		<script src="js/handsontable.full.js"></script>

	</head>

	<body>

		<div id="example"></div>

		<script>

			var data = [

				['2017-01', '北京', '冰箱', '3399', 530],

				['2017-01', '天津', '空调', '4299', 522],

				['2017-01', '上海', '洗衣机', '1299', 544],

				['2017-01', '广州', '彩电', '4599', 562],

				['2017-01', '深圳', '热水器', '1099', 430],

				['2017-02', '重庆', '笔记本电脑', '4999', 666],

				['2017-02', '厦门', '油烟机', '2899', 438],

				['2017-02', '青岛', '饮水机', '899', 620],

				['2017-02', '大连', '手机', '1999', 500]

			];

			var hot = new Handsontable(document.getElementById('example'),{

				data: data,

				colHeaders: ['日期', '地点', '商品', '单价', '销量'], // 使用自定义列头

				rowHeaders: true,

				editor: false, // 禁用所有单元格编辑

				colWidths: 150, // 设置所有列宽为150像素

                contextMenu: false, // 禁用右键菜单

				mergeCells: [

					{row:0, col:0, rowspan:5, colspan:1},

					{row:5, col:0, rowspan:4, colspan:1}

				],

	            cell: [

	                {row: 0, col: 0, className: "htCenter htMiddle"}, // 设置下标为0,0的单元格样式 水平居中、垂直居中

	                {row: 5, col: 0, className: "htCenter htMiddle"}

	            ]

			});

		</script>

	</body>

</html>

　　

上面我们已经将右键菜单禁用掉，现在将使用js对容器插入行列，并初始化插入列的数据

再结合alter与setDataAtCell方法我们将在下面做一个简单的例子：

// 在索引9行之前插入2个空行

hot.alter('insert_row', 9, 2);

// 对2个空行进行填充数据

hot.setDataAtCell([

	[9, 0, '2017-03'],

	[9, 1, '武汉'],

	[9, 2, '路由器'],

	[9, 3, 149],

	[9, 4, 692],

	[10, 0, '2017-03'],

	[10, 1, '杭州'],

	[10, 2, '移动电源'],

	[10, 3, 99],

	[10, 4, 785]

]);

hot.alter('remove_row', 6); // 移除索引为6的行

　　

由于我们刚开始设置了合并列，现在删除第6行后，后面几行数据将会追加上去，所以新添加的一行（日期列）会被合并掉

handsontable 合并单元格的更多相关文章

  1. Handsontable对单元格的操作

    1.自动填充单元格数据 fillHandle:true/false    //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格 2.合并单元格 mergeCells:[{row:起 ...

  2. [转]Handsontable对单元格的操作

    原文地址:http://blog.csdn.net/mafan121/article/details/46119905 1.自动填充单元格数据 fillHandle:true/false    //当 ...

  3. C# 获取Excel中的合并单元格

    C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...

  4. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  5. NPOI操作EXCEL（五）——含合并单元格复杂表头的EXCEL解析

    我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...

  6. poi获取合并单元格内的第一行第一列的值

    当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...

  7. Repeater多列分别合并单元格

    GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...

  8. Aspose.Cells 首次使用，用到模版填充数据，合并单元格，换行

    Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...

  9. easyui datagrid 合并单元格

    整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...

随机推荐

  1. 二、Item Pipeline和Spider-----基于scrapy取校花网的信息

    Item Pipeline 当Item在Spider中被收集之后,它将会被传递到Item Pipeline,这些Item Pipeline组件按定义的顺序处理Item. 每个Item Pipeline ...

  2. python requests库学习笔记（下）

    1.请求异常处理 请求异常类型: 请求超时处理(timeout): 实现代码: import requestsfrom requests import exceptions        #引入exc ...

  3. Java经典编程题50道之四十七

    读取7个数(1~50)的整数值,每读取一个值,程序打印出该值个数的*. public class Example47 {    public static void main(String[] arg ...

  4. makefile讲解

    仅供自己学习使用 一.Makefile介绍 Makefile 或 makefile: 告诉make维护一个大型程序, 该做什么.Makefile说明了组成程序的各模块间的相互 关系及更新模块时必须进行 ...

  5. Yii2 日志处理

    最近开发一个新的PHP项目,终于脱离了某框架的魔爪(之前被折磨的不轻),选用了江湖中如雷贯耳的Yii2框架.每个项目代码的运行,日志是必不可少的,在开发中踩了一遍Yii2日志管理的坑,看过很多网上对Y ...

  6. 《android开发进阶从小工到专家》读书笔记--HTTP网络请求

    No1: 客户端与服务器的交互流程: 1)客户端执行网络请求,从URL中解析出服务器的主机名 2)将服务器的主机名转换成服务器的IP地址 3)将端口号从URL中解析出来 4)建立一条从客户端与Web服 ...

  7. 重装Win10系统的非常简单的操作教程

    这是回到学校的第二天,准备搞一份实习证明,然而宿舍宽带停了,于是我来到了社团办公室,打开了其中一台电脑. 各位师弟师妹...你们也太厉害,把电脑折腾成这样...电脑装了各种各样的工具, Adobe P ...

  8. 内置函数值 -- chr() ord() -- 字符和ascii的转换

    英文文档: chr(i) Return the string representing a character whose Unicode code point is the integer i. F ...

  9. eclipse调试hadoop2.2.0源码笔记

    在hadoop1.x版本时使用的是在Windows下编译Eclipse插件,远程调试集群.换成2.2.0,没有eclipse-plugin文件. hadoop2.2.0"远程调试集群&quo ...

  10. NLP+词法系列（二）︱中文分词技术简述、深度学习分词实践（CIPS2016、超多案例）

    摘录自:CIPS2016 中文信息处理报告<第一章 词法和句法分析研究进展.现状及趋势>P4 CIPS2016 中文信息处理报告下载链接:http://cips-upload.bj.bce ...