在web中js实现类似excel的表格控件


Posted in Javascript onSeptember 01, 2016

Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力。那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数据进行实时编辑。另外支持拖动复制、Ctrl+C 、Ctrl+V 等等。在浏览器支持方面,它支持以下的浏览器: IE7+, FF, Chrome, Safari, Opera。

首先引入相关库文件,公式支持不包含在handsontable.full.js中,需要单独引入: 

<script src="http://handsontable.github.io/handsontable-ruleJS/lib/jquery/jquery-1.10.2.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.css">
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/lodash/lodash.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/underscore.string/underscore.string.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/moment/moment.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numeral/numeral.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numericjs/numeric.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/js-md5/md5.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/jstat/jstat.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/formulajs/formula.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/parser.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/ruleJS.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.formula.js"></script>

在HTML中放置一个Div容器来存放handsontable控件:

<body>
  <div id="handsontable-code"></div>
 </body>

在javascript代码中,首先获取div容器,然后创建表格控件: 

<script type="text/javascript">
   $(document).ready(function () {

 var data1 = [
  ['=$B$2', "Maserati", "Mazda", "return 1+2;", 'return DataAccess.getScalar("select top 1 name from Cloud_Users where cellPhone=15895211486");', "=A$1"],
  [2009, 0, 2941, 4303, 354, 5814],
  [2010, 5, 2905, 2867, '=SUM(A4,2,3)', '=$B1'],
  [2011, 4, 2517, 4822, 552, 6127],
  [2012, '=SUM(A2:A5)', '=SUM(B5,E3)', '=A2/B2', 12, 4151]
 ];


      function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);

        var escaped = Handsontable.helper.stringify(value),
        newvalue;

        if (escaped.indexOf('return') === 0) {
          //计算列为只读
          //cellProperties.readOnly = true;
          td.style.background = '#EEE';
          newvalue = document.createElement('span');
          $.ajax({
            //提交数据的类型 POST GET
            type: "POST",
            //提交的网址
            url: "/services/CSEngine.ashx",
            //提交的数据
            data: { code: value, code2: escaped },
            //返回数据的格式
            datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
            //在请求之前调用的函数
            //beforeSend: function () { $("#msg").html("logining"); },
            //成功返回之后调用的函数       
            success: function (data) {
              // $("#msg").html(decodeURI(data));
              newvalue.innerHTML = decodeURI(data);
            },
            //调用执行后调用的函数
            complete: function (XMLHttpRequest, textStatus) {
              //alert(XMLHttpRequest.responseText);
              // alert(textStatus);
              //HideLoading();
            },
            //调用出错执行的函数
            error: function () {
              //请求出错处理
              // alert('error')
            }
          });
         

          Handsontable.Dom.addEvent(newvalue, 'mousedown', function (e) {
            e.preventDefault(); // prevent selection quirk
          });

          Handsontable.Dom.empty(td);
          td.appendChild(newvalue);
        }
        // if row contains negative number
        if (parseInt(value, 10) < 0) {
          // add class "negative"
          td.className = 'negative';
        }

       
      }



 //类似excel进行拖放,公式会变
 var container1 = $('#handsontable-code');
 Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
 container1.handsontable({
  data: data1,
  minSpareRows: 1,
  colHeaders: true,
  rowHeaders: true,
  contextMenu: true,
  manualColumnResize: true,
  formulas: true,
   cells: function (row, col, prop) {
          var cellProperties = {};
          var escaped = Handsontable.helper.stringify(this.instance.getData()[row][col]);
          if (escaped.indexOf('return')===0) {
            cellProperties.renderer = "negativeValueRenderer"; 
          }
  

          return cellProperties;
        }
 });
 
});
   
  </script>

其中 =SUM(B5,E3)的公式是RuleJs提供的,return 1+2是自己实现的C#代码脚本,需要单击解析:

public class CSEngine : IHttpHandler {
  private static int count = 0;
  public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";

    try
    {
      count++;
      string ret = "";
      string code = context.Request["code"].ToString();
      if (string.IsNullOrEmpty(code))
      {
        ret = "参数错误";
      }
      else
      {
        ScriptOptions options = ScriptOptions.Default
         .AddReferences(
           Assembly.GetAssembly(typeof(DBServices.DataAccess))
          )
         //.AddImports("System.Data")
         //.AddImports("System.Data.SqlClient")
         .AddImports("DBServices");
        var state = CSharpScript.RunAsync(code, options).Result.ReturnValue;
        ret = state.ToString();

        state = null;
        options = null;
      }
      Console.WriteLine(count);
      context.Response.Write(ret);
    }
    catch(Exception ex)
    {
      //error
      Console.WriteLine(count);
    }
  }

  public bool IsReusable {
    get {
      return false;
    }
  }

}

运行代码,如下:

在web中js实现类似excel的表格控件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 #Javascript
AngularJs 指令详解及示例代码
Sep 01 #Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 #Javascript
JS实现列表的响应式排版(推荐)
Sep 01 #Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 #Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 #Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php连接mysql数据库代码
2009/03/10 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
node中的session的具体使用
2018/09/14 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
Python简单读取json文件功能示例
2017/11/30 Python
python实现Floyd算法
2018/01/03 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python增加图像对比度的方法
2019/07/12 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
综合测评自我鉴定
2013/10/08 职场文书
简单英文演讲稿
2014/01/01 职场文书
违反学校规定检讨书
2014/01/18 职场文书
保健品市场营销方案
2014/03/31 职场文书
经销商年会策划方案
2014/05/29 职场文书
五心教育心得体会
2014/09/04 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript