handsontable自定义渲染

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

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

下面是几个借鉴的网站：

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

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/ ，对实例做了修改

文章来源: handsontable自定义渲染

标签

handsontable

脚本