在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 相关文章推荐
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
node.js中express-session配置项详解
May 31 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 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扩展介绍与开发教程
2010/08/19 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
layui递归实现动态左侧菜单
2019/07/26 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python切片操作深入详解
2018/07/27 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
用python制作个视频下载器
2021/02/01 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Python代码实现双链表
2022/05/25 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS