<!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. win7下通过easyBCD引导安装Ubuntu16.04（并处理遇到的坑）

    Ubuntu16.04作为目前最新版本的ubuntu系统,相信很多人都想在自己的电脑上安装一下,然而系统的安装方法各式各样,u盘法.grub引导法等等,这里我将介绍在win7系统下用easyBCD软件 ...

  2. mysql那些事

    ---恢复内容开始--- 登录 mysql登录 -u+用户 -p 密码 显示数据库 show databases; 使用某个数据库 use xxx; 显示数据库表 show tables 显示表结构 ...

  3. sqlite不存在记录则插入数据

    问题:如下图在Sqlite数据库中存在一张Student表,现需要向表中插入数据,如果不存在同名记录则插入,否则不进行插入操作. 解答:利用not exists语句,如下: insert into [ ...

  4. C语言_结构体变量指针做函数参数的使用案例

    # include <stdio.h> # include <stdlib.h> # include <string.h> # include <malloc ...

  5. Windows Sublime Text 配置Linux子系统(WSL)下的 gcc/g++ 编译环境

    0. 简介(若已了解背景可以跳过此部分) Windows 10 Build 14316以上版本中加入了"Windows系统的Linux子系统"(Windows Subsystem ...

  6. Photoshop CC 常用快捷方法有哪些？

    Photoshop CC 常用快捷方法有哪些? 属性栏 工具栏 控制面板 绘图区 1. 多个图层如何快速居中? 在 控制面板 中选中多个图层创建 链接图层 在 工具栏 选择 移动工具 在 属性栏 点击 ...

  7. 在SpringBoot中存放session到Redis

    前言 今天你们将再一次领略到SpringBoot的开发到底有多快,以及SpringBoot的思想(默认配置) 我们将使用redis存放用户的session,用户session存放策略有很多,有存放到内 ...

  8. Hadoop 错误归档库

    在hive中操作任意mapreduce相关语句 The size of Container logs revealed the below error: 2015-04-24 11:41:41,858 ...

  9. Django开发基础----操作数据库

    Django中对数据库的操作是由Models来完成的 Models是什么? 通常,一个Model对应数据库的一张数据表 Django中Models以类的形式出现 它包含了一些基本字段以及数据的一些行为 ...

  10. 浅谈this关键字

    在我学习this关键字的时候,通过查找资料总结出一些this的特殊用法, 供大家参考,代码里面有我总结的分析过程! 箭头函数里的this: var username = "全局"; ...