<!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. [原创]ubuntu14.04部署ELK+redis日志分析系统

    ubuntu14.04部署ELK+redis日志分析系统 [环境] host1:172.17.0.4 搭建ELK+redis服务 host2:172.17.0.3 搭建logstash+nginx服务 ...

  2. WinFom中经典小游戏(含源码)

    最近整理了若干经典的小游戏,无聊时可以打发时间.程序本身不大,练手非常不错,主要是GDI编程,主界面地址如下图所示 源码下载方式 1,关注微信公众号:小特工作室(也可直接扫描签名处二维码) 2,发送: ...

  3. Java经典编程题50道之二

    判断101-200之间有多少个素数,并输出所有素数. public class Example02 {    public static void main(String[] args) {      ...

  4. HopSpot虚拟机中的Mark word的作用

    1.其为对象头保存对象的hashcode 2.保存GC分代年龄,锁状态标志,线程持有的锁,偏向线程的ID偏向时间戳.

  5. MySQL的常见存储引擎介绍与参数设置调优

    MySQL常用存储引擎之MyISAM 特性: 1.并发性与锁级别 2.表损坏修复 check table tablename repair table tablename 3.MyISAM表支持的索引 ...

  6. ansible基本使用教程

    转载请注明出处http://www.cnblogs.com/chenxianpao/p/7360349.html 一. 介绍 1. 简介     ansible是新出现的自动化运维工具,基于Pytho ...

  7. shell 脚本——判断条件

    在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...

  8. Object方法

    1. getClass() 返回此 Object 的运行时类. 2. hashCode() 返回该对象的哈希码值. 3. equals() 指示其他某个对象是否与此对象“相等”. 4. toStrin ...

  9. shell脚本基础 数值运算 判断 及if语句

    数值运算 整数运算[三种,随便掌握一种即可]expr 数字 运算符 数字 [root@ceshiji ~]# expr 1 + 1(运算符号都是+ - * / 注:*需要\*.%是取余,余数只有0 1 ...

  10. 嵌入式 Linux 与linux启动时自动加载模块

    一.在ARM linux 下,一般而言,产品在启动的过程中应该加载模块,最简单的方法是修改启动过程的rc脚本(/etc/init.d/rcS),增加ismod /../xxx.ko这个命令.例如:加载 ...