<!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. Linux-PATH_环境变量

    PATH变量         是linux系统里的一个环境变量,系统已经定义好了,我们不需要再定义. 作用:         是linux里使用的命令都存在在PATH变量后面指定的目录下,我们使用命令 ...

  2. hdu3480 Division（dp平行四边形优化）

    题意:将n个数分成m段,每段的代价为最大值减最小值的平方,为代价最小是多少n<=10000 ,m<=5000 题解:先拍好序,从小到大,这样绝对是花费最小的,不过怎么样来做呢?一定很容易想 ...

  3. 前端JS面试题汇总 Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)

    原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...

  4. 用yii2给app写接口（上）

    Yii2如何实现RESTful风格的API 1.建立单独的应用程序 为了增加程序的可维护性,易操作性,我们选择新建一套应用程序,这也是为了和前台应用.后台应用区分开操作.有些人要嚷嚷了,为啥非得单独搞 ...

  5. 理解Activity.runOnUiThread()

    这是一篇译文(中英对照),原文链接:Understanding Activity.runOnUiThread() When developing Android applications we alw ...

  6. java socket 模拟im 即时通讯

    自己想了一下怎么实现,就写了,没有深究是否合理.更多处理没有写下去,例如收件人不在线,应该保存在数据库,等下一次连接的时候刷新map,再把数据发送过去,图片发送也没有做,也没有用json格式 sock ...

  7. SQL Server 批量插入

    使用场景 在项目中,涉及到数据库表变更时,可能会需要将一个或多个表中的数据迁移到另一个表中. 这时用sql去执行会很方便! sql语句 //SQL批量插入 create table #ttableNa ...

  8. linux dns子域授权 split分离解析 缓存dns服务器

    DNS子域授权作用:适用于同一个DNS组织父/子域名的解析工作由不同的dns服务器负责父dns服务器应该有为子域名迭代的能力 上下级区域属于不同的机构管理:.cn与.Anonymous.cn.cn需要 ...

  9. CSRF的本质及防御

    本质:产生的原因本质上是参数可知或可预测 防御: 1.加密参数:加密加盐,不可知,不可预测      忧虑,引入其他麻烦:一.数据分析困难                               ...

  10. 浏览器通过Scheme协议启动APP中的页面

    在APP开发过程中,通过外部浏览器调起APP页面的场景也很普遍使用.下面就介绍一下通过外部H5页面唤起APP中页面的通用方法. 1.首先需要在AndroidMainifest.xml中对你要启动的那个 ...