JavaScript教程之Handsontable, formula.js

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之Handsontable, formula.js

本文介绍使用Handsontable 来实现web项目网页上的Excel，以及Excel公式渲染，对技术做个总结，有什么遗漏或有误的地方，欢迎大家指教。

Handsontable 官网： https://handsontable.com/

Handsontable API：https://docs.handsontable.com/pro/3.0.0/tutorial-introduction.html

Handsontable 是实现了网页展示Excel的功能，展示的时候如果用到Excel公式，就需要借助 formula.js 和 ruleJS.js 来实现了

Formula.js 是一个实现 Microsoft Excel 和 Google Spreadsheets 等类似的电子表格应用程序具有的强大公式的功能库，带给 Web 开发人员最常用的日期/时间，文本，逻辑，金融等各个类别的公式

下面是几个借鉴的网站：

handsontable的单元格操作方法： https://www.cnblogs.com/sily-boy/p/4863156.html

handsontable自定义渲染： https://www.cnblogs.com/QiuJL/p/6972327.html

Handsontable 自定义渲染 Renderer 类型：

autocomplete for Handsontable.renderers.AutocompleteRenderer
base for Handsontable.renderers.BaseRenderer
checkbox for Handsontable.renderers.CheckboxRenderer
date for Handsontable.renderers.DateRenderer
dropdown for Handsontable.renderers.DropdownRenderer
html for Handsontable.renderers.HtmlRenderer
numeric for Handsontable.renderers.NumericRenderer
password for Handsontable.renderers.PasswordRenderer
text for Handsontable.renderers.TextRenderer
time for Handsontable.renderers.TimeRenderer

 1  <html xmlns="http://www.w3.org/1999/xhtml">
 2  <head runat="server">
 3      <title>A</title>
 4      <script src="Script/jquery-1.10.1.min.js"></script>
 5      <script src="Script/handsontable.full.js"></script>
 6      <link href="Script/handsontable.full.css" rel="stylesheet" />
 7      <script src="Script/lodash.js"></script>
 8      <script src="Script/underscore.string.js"></script>
 9      <script src="Script/moment.js"></script>
10      <script src="Script/numeral.js"></script>
11      <script src="Script/numeric.js"></script>
12      <script src="Script/md5.js"></script>
13      <script src="Script/jstat.js"></script>
14      <script src="Script/formula.js"></script>
15      <script src="Script/parser.js"></script>
16      <script src="Script/ruleJS.js"></script>
17      <script src="Script/handsontable.formula.js"></script>
18  </head>
19  <body>
20      <form id="form1" runat="server">
21          <div id="handsontable-code" class="dataTable" />
22      </form>
23  
24  </body>
25  <script type="text/javascript">
26      $(document).ready(function () {
27  
28          var data1 = [
29           ['第一列', "第二列", "第三列", "第四列", '第五列', "第六列"],
30           [2009, 0, 2941, 4303, 354, 5814],
31           [2010, 5, 2905, 2867, '=SUM(A4,2,3)', '=$B1'],
32           [2011, 4, 2517, 4822, 552, 6127],
33           [2012, '=SUM(A2:A5)', '=SUM(B5,E3)', '=A2/B2', 12, 4151]
34          ];
35          Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
36          var container1 = $('#handsontable-code');
37          container1.handsontable({
38              data: data1,
39              minSpareRows: 1,  //为0时，handsontable 可去掉最后多余的一行
40              colHeaders: true,
41              rowHeaders: true,
42              contextMenu: true,
43              manualColumnResize: true,
44              formulas: true,
45              cells: function (row, col, prop) {
46                  var cellProperties = {};
47                  cellProperties.renderer = "negativeValueRenderer";
48                  return cellProperties;
49              }
50          });
51      });
52      
53      function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
54              //Handsontable.renderers.TextRenderer.apply(this, arguments);  //单纯的文本渲染，会把公式当作文本直接打出来
55              Handsontable.TextCell.renderer.apply(this, arguments);　　//TextCell.renderer 单元格渲染，可以识别公式
56              if (row == 4 ){
57                  td.style.background = '#66CDAA';
58              } else {
59                  cellProperties.readOnly = true;
60              }
61          }
62  </script>
63  </html>

代码引自：http://blog.163.com/lilinrui_ruirui/blog/static/2011580362016112051619913/ ，对实例做了修改

栏目列表