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 = ;

     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中实现类似excel的表格控件的更多相关文章
	

    
								
  1. 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件
		
    [案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用  ...
    
		
    2. 
						
  2. 基于纯前端类Excel表格控件实现在线损益表应用
		
    财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金.利润状况的会计报表,由资产负债表.损益表.现金流量表或财务状况变动表.附表和附注构成.财务报表是财务报告的主要部分,不包括 ...
    
		
    3. 
						
  3. XCODE中使用Main.Storyboard拉入控件并实现事件（Swift语言）
		
    如何在XCODE中的Main.Storyboard内拉入控件并实现一个简单的效果呢?本人由于刚接触Swift语言不久,对于IDE的操作还是很生疏,不懂了就在网上参考了网上前辈们的文章.以下我将演示如何 ...
    
		
    4. 
						
  4. 【图解】Web前端实现类似Excel的电子表格
		
    本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品.Google的在线SpreadSheet). 工具简介:  ...
    
		
    5. 
						
  5. C#中缓存的使用  ajax请求基于restFul的WebApi(post、get、delete、put)  让 .NET 更方便的导入导出 Excel  .net core api +swagger(一个简单的入门demo 使用codefirst+mysql)  C# 位运算详解  c# 交错数组  c# 数组协变  C# 添加Excel表单控件（Form Controls）  C#串口通信程序
		
    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...
    
		
    6. 
						
  6. 如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置
		
    如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置   <div style="position:relative;"> <img src=&quo ...
    
		
    7. 
						
  7. 葡萄城首席架构师：前端开发与Web表格控件技术解读
		
    讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...
    
		
    8. 
						
  8. 详解如何利用FarPoint Spread表格控件来构造Winform的Excel表格界面输入
		
    我们先来简单了解一下WinForm和FarPoint,WinForm是·Net开发平台中对Windows Form的一种称谓.而FarPoint是一款模拟EXCEL的控件.它可以根据用户的要求实现很大 ...
    
		
    9. 
						
  9. [ PyQt入门教程 ] PyQt5中数据表格控件QTableWidget使用方法
		
    如果你想让你开发的PyQt5工具展示的数据显得整齐.美观.好看,显得符合你的气质,可以考虑使用QTableWidget控件.之前一直使用的是textBrowser文本框控件,数据展示还是不太美观.其中 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Spark-shell和Spark-Submit的使用
			
    Spark-shell有两种使用方式: 1:直接Spark-shell 会启动一个SparkSubmit进程来模拟Spark运行环境,是一个单机版的. 2:Spark-shell --master S ...
    
			
    2. 
						
  2. SCNU ACM 2016新生赛决赛 解题报告
			
    新生初赛题目.解题思路.参考代码一览 A. 拒绝虐狗 Problem Description CZJ 去排队打饭的时候看到前面有几对情侣秀恩爱,作为单身狗的 CZJ 表示很难受. 现在给出一个字符串代 ...
    
			
    3. 
						
  3. hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的用法
			
    javascript中有原型这么一个概念,任何一个构造函数都有它对应的原型(prototype),我们可以给这个原型赋予一些我们想要的属性,像下面这样: function Gadget(name, c ...
    
			
    4. 
						
  4. Mono 3.8发布：性能进一步改进，可伸缩性提升
			
    9月4日,Mono 3.8.0发布了.该版本的运行时带来了一些性能和可伸缩性方面的改进,同时完成了向Windows平台的移植. Mono遵循Gnome和Linux内核的版本编号策略,这意味着3.8是3 ...
    
			
    5. 
						
  5. iOS开发系列--音频播放、录音、视频播放、拍照、视频录制
			
    --iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...
    
			
    6. 
						
  6. 是时候搁置Grunt，耍一耍gulp了
			
    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
    
			
    7. 
						
  7. 搭建 windows（7）下Xgboost（0.4）环境 （python,java）以及使用介绍及参数调优
			
    摘要: 1.所需工具 2.详细过程 3.验证 4.使用指南 5.参数调优 内容: 1.所需工具 我用到了git(内含git bash),Visual Studio 2012(10及以上就可以),xgb ...
    
			
    8. 
						
  8. Android PopupWindow Dialog 关于 is your activity running 崩溃详解
			
    Android PopupWindow Dialog 关于 is your activity running 崩溃详解 [TOC] 起因 对于 PopupWindow Dialog 需要 Activi ...
    
			
    9. 
						
  9. 微信JSAPI支付
			
    最近在微信H5页面内集成微信JSAPI支付,遇到不少问题,现将集成步骤及遇到的问题记录如下: 1.官方下载SDK,下载地址:https://pay.weixin.qq.com/wiki/doc/api ...
    
			
    10. 
						
  10. Git : SSH 协议服务器
			
    SSH 协议用于为 Git 提供远程读写操作,是远程写操作的标准服务. SSH协议语法格式 对于拥有 shell 登录权限的用户账号,可以用下面的语法访问 Git 版本库: 语法 1 : ssh:// ...
    
			
    11.