在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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
js中的json对象详细介绍
Oct 29 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
简单谈谈json跨域
Mar 13 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
封装一下vue中的axios示例代码详解
Feb 16 Javascript
js实现点击选项置顶动画效果
Aug 25 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
PHP使用者状态管理功能的应用
2006/10/09 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
jquery 插件开发备注
2010/08/27 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python3音乐播放器简单实现代码
2020/04/20 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
市场营销方案范文
2014/03/11 职场文书
联谊会主持词
2014/03/26 职场文书
学生手册评语
2014/05/05 职场文书
社区春季防火方案
2014/06/02 职场文书
财务人员个人工作总结
2015/02/27 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python