handsontable自定义渲染
程序员文章站
2022-08-27 11:12:55
本文介绍使用Handsontable 来实现web项目网页上的Excel，以及Excel公式渲染，对技术做个总结，有什么遗漏或有误的地方，欢迎大家指教。 Handsontable 官网： https://handsontable.com/ Handsontable API：https://docs. ......
本文介绍使用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 开发人员最常用的日期/时间，文本，逻辑，金融等各个类别的公式
下面是几个借鉴的网站：
： https://www.cnblogs.com/QiuJL/p/6972327.html
Handsontable 自定义渲染 Renderer 类型：
-
autocompleteforHandsontable.renderers.AutocompleteRenderer -
baseforHandsontable.renderers.BaseRenderer -
checkboxforHandsontable.renderers.CheckboxRenderer -
dateforHandsontable.renderers.DateRenderer -
dropdownforHandsontable.renderers.DropdownRenderer -
htmlforHandsontable.renderers.HtmlRenderer -
numericforHandsontable.renderers.NumericRenderer -
passwordforHandsontable.renderers.PasswordRenderer -
textforHandsontable.renderers.TextRenderer -
timeforHandsontable.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/ ，对实例做了修改