基于handsontable的web excel（上）

handsontable是一个js插件，可以在网页上显示和操作excel。可以通过github或者handsontable的官方网站下载。首先上效果图：

使用handsontable显示excel步骤:

一、导入js和css：

    <link href="__STATIC__/handsontable/handsontable.full.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script><script type="text/javascript" src="__STATIC__/handsontable/handsontable.full.js"></script>

二、创建一个div作为excel表格的容器:

    <div id="lina_main"></div>

三、添加初始数据:

3.1、自定义行高和列宽，单位是px：

     var cell_width = [100,120,90,100,100];var cell_height = [50,20,40,100];

3.2、设置单元格数据：

      var cell_data = [["", "Ford", "Tesla", "Toyota", "Honda"],["2017", 10, 11, 12, 13],["2018", 20, 11, 14, 13],["2019", 30, 15, 12, 13]];

3.3、调用Handsontable 绘制表格：

            var container = document.getElementById('lina_main');hot = new Handsontable(container, {data: cell_data, //导入数据rowHeaders: true,colHeaders: function(index) {return ++index;},autoColumnSize:false,autoRowSize:false,//禁止行列自动计算距离dropdownMenu: true,manualRowResize: true,manualColumnResize: true,//行列可拉缩manualColumnMove: true,//可整行整列移动manualRowMove: true,mergeCells:true,//合并单元格contextMenu: true,//使用菜单colWidths: cell_width,//定义列宽度rowHeights:cell_height ,//定义行高度//水平：htLeft，htCenter，htRight，htJustify，//垂直：htTop，htMiddle，htBottom。//只读: readOnly htDimmedcell:[ //设置单元格属性{row: 1, col: 1, readOnly: true,className: 'htCenter htMiddle'},{row: 2, col: 0, className: 'htCenter htMiddle'},],mergeCells: [{row: 1, col: 1, rowspan: 2, colspan: 2}],//设置单元格合并情况afterRowResize: function(currentRow, newSize) { cell_height[currentRow] =  newSize; hot.updateSettings({ rowHeights: cell_height }); },//rowHeights为最小高度，为了设置比初始值更小的高度，编写此钩子});

首先获取div容器，然后设置显示的参数，均有备注。需要注意以下参数：

1、在使用manualRowResize和manualColumnResize手动拉伸行列的时候，最好关闭autoRowSize和autoColumnSize。

2、cell参数可以单独设置某个单元格的格式，row和col表示单元格的行号列号（注意是从0开始），readOnly设置是否只读，className表示数据

在单元格中的显示是上下居中，左右居中等显示格式。

3、mergeCells参数表示合并单元格的情况，row和col表示单元格的行号和列号，rowspan和colspan表示跨域的行和列。

4、rowHeights设置了行初始化高度，同时也是最小高度（这个比较坑）。故在afterRowResize，行高改变之后重新赋值行的高度。

5、header表示头、true为默认的选项，即列号ABCD，如果想改为1、2、3或者其他，可以自定义函数。
至此，一个可编辑的excel便展示出来了。

基于handsontable的web excel（上）相关推荐

如何构建基于 Web Excel 组件的指标补录平台
本期 Chat,由华融融通科技有限公司开发经理--郭晓冬先生,分享"纯前端表格控件 SpreadJS 在金融行业的应用"以及如何构建基于 Web Excel 组件的指标补录平台. ...
【案例分享】SpreadJS金融行业应用实践，开发基于Web Excel的指标补录平台
SpreadJS作为一款基于 HTML5 的纯前端电子表格控件,以"高速低耗.高度类似Excel.可无限扩展"为产品特色,提供移动跨平台和浏览器支持,可同时满足 .NET.Java ...
python excel web_使用python在WEB页面上生成EXCEL文件
近日写的一个程序需要在WEB服务器上生成EXCEL文件供用户下载,研究了一下找到了以下比较可行的实现方案,下面以web.py为例,把相关代码贴出来供大家参考: 首先需要下载生成EXCEL的模块,推荐使 ...
《Flask Web开发——基于Python的Web应用开发实践》一字一句上机实践（上）
目录前言第1章安装第2章程序的基本结构第3章模板第4章 Web表单第5章数据库第6章电子邮件第7章大型程序的结构前言学习Python也有一个半月时间了,学到现在感觉还是 ...
如何在 SAP BTP 平台 ABAP 编程环境里消费基于 SOAP 的 Web Service
这是 Jerry 2021 年的第 47 篇文章,也是汪子熙公众号总共第 324 篇原创文章. Jerry 2014 年时,曾经在 SAP 社区上写过一篇英文博客,介绍了如何在 ABAP On-Pre ...
基于Crawler4j的WEB爬虫
基于Crawler4j的WEB爬虫一.WEB爬虫介绍爬虫,Crawler,最早被用于搜索引擎收录页面,例如百度蜘蛛等等.说简单点,原理就是根据一些规则,获取url和页面,再从获取到的页面中继续提取 ...
LVS详解及基于LVS实现web服务器负载均衡
前言 LVS(Linux Virtual Server)Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一.通过LVS提供的 ...
基于HT for Web 3D呈现Box2DJS物理引擎
为什么80%的码农都做不了架构师?>>> 上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来 ...
基于.htaccess的Web Shell工具htshells
基于.htaccess的Web Shell工具htshells .htaccess文件是Apache服务器的配置文件.它负责相关目录下的网页配置.一旦用户获得修改该文件的权限,就可以基于该文件构建Sh ...
spring_在基于Spring的Web应用程序中使用Http Session
spring 在基于Spring的Web应用程序中拥有和使用Http会话有多种方法. 这是基于最近项目经验的总结. 方法1 只需在需要的HttpSession中注入即可. @Service publi ...

基于handsontable的web excel（上）

基于handsontable的web excel（上）相关推荐

最新文章

热门文章