JavaScript基础教程如何使用Handsontable来实现web项目网页上的Excel-职坐标

JavaScript基础教程如何使用Handsontable来实现web项目网页上的Excel

沉沙 2018-07-31 来源：阅读 6713 评论 0

摘要：本篇教程介绍了JavaScript基础教程如何使用Handsontable来实现web项目网页上的Excel，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript基础教程如何使用Handsontable来实现web项目网页上的Excel，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

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 自定义渲染 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="//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>