Handsontable, formula.js

Tsing_Kwai發表於2018-06-05
ORMJS

本文介紹使用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/ ，對例項做了修改

相關文章