Handsontable, formula.js

2018-06-24 02:13:50来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

本文介绍使用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/ ,对实例做了修改

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS,Jquery获取各种屏幕的宽度和高度

下一篇:vue-cli模拟后台数据交互