在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 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
js保留两位小数方法总结
Jan 31 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 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精确的统计在线人数的方法
2015/10/21 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python动态监控日志内容的示例
2014/02/16 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python实现端口检测的方法
2018/07/24 Python
django的model操作汇整详解
2019/07/26 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
挂职思想汇报
2013/12/31 职场文书
端午节演讲稿
2014/05/23 职场文书
公司借条范本
2015/05/25 职场文书
百万英镑观后感
2015/06/09 职场文书
就业证明函
2015/06/17 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
运动会入场词
2015/07/18 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL