More
More

js仿Excel公式应用-ruleJS

  • 概要

    这是一个基于ruleJS的应用小Demo,体现网页表格等输入公式(类似Excel)并自动计算结果的效果;适用IE9及以上主流浏览器;demo根据handsontable github上源码改编。

  • 难点

    ruleJS取值定位类似Excel,默认使用了横轴英文字母(A、B、C…),纵轴数字(1,、2、3…)来定位值;如,id值为“C1”即表示第3列第1行元素;此时当网页同时存在多个表格时,需要考虑id重复的隐患,本例使用了iframe来回避这个问题;

    尝试兼容IE8做了些修改,替换了源码中使用的一些IE8不支持的函数,诸如:querySelectorAll、Array.indexOf、Array.filter、Array.forEach、getElementsByClassName等;最后还是因为ie8没有HTMLElement兼容失败,暂时抛弃小八(T T);

    handsontable贴出的介绍函数链接已失效,可参考Excel相关函数定义规范来使用(或者看js源码–);

  • 链接
    演示地址:点我
    demo源码:github传送门

  • 源码分析

1
2
3
4
5
6
7
8
☞ ruleJS.all.full.js片段:
/**
* form elements, which can be parsed
* @type {string[]}
*/
//var formElements = ['input[type=text]', '[data-formula]'];
//定义需要转换为公式的选择器
var formElements = ['input[class=rj-formula]', '[data-formula]'];
1
2
3
4
☞ jsp片段:
<input type="text" id="A3" value="7" class="rj-formula">
...
<span id="K1" data-formula="SUM(A1:C3,A1)" class="rj-formula"></span>
打赏
手机扫一扫,支持CHE~