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. Dynamics CRM 之ADFS 使用 WID 的联合服务器场
			
    使用 WID 的联合服务器场 默认拓扑 Active Directory 联合身份验证服务 (AD FS) 是联合服务器场,使用 Windows 内部数据库 (WID). 在这种拓扑, AD FS 使 ...
    
			
    2. 
						
  2. Kotlin类：功能更强、而更简洁（KAD 03）
			
    作者:Antonio Leiva 时间:Dec 7, 2016 原文链接:http://antonioleiva.com/classes-kotlin/ Kotlin类尽可能简单,这样用较少的代码完成 ...
    
			
    3. 
						
  3. linux 如何对文件解压或打包压缩
			
    tar命令用与对文件打包压缩或解压,格式: tar [选项] [文件] 打包并压缩文件: tar -czvf  压缩包名 .tar.gz 解压并展开压缩包: tar -xzvf  压缩包名 .tar. ...
    
			
    4. 
						
  4. How to accept Track changes in Microsoft Word 2010?
			
    "Track changes" is wonderful and remarkable tool of Microsoft Word 2010. The feature allow ...
    
			
    5. 
						
  5. 札记：Java异常处理
			
    异常概述 程序在运行中总会面临一些"意外"情况,良好的代码需要对它们进行预防和处理.大致来说,这些意外情况分三类: 交互输入 用户以非预期的方式使用程序,比如非法输入,不正当的操作 ...
    
			
    6. 
						
  6. 【腾讯bugly干货分享】微信Android热补丁实践演进之路
			
    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1264& ...
    
			
    7. 
						
  7. Floyd-Warshall 全源最短路径算法
			
    Floyd-Warshall 算法采用动态规划方案来解决在一个有向图 G = (V, E) 上每对顶点间的最短路径问题,即全源最短路径问题(All-Pairs Shortest Paths Probl ...
    
			
    8. 
						
  8. 借助GitHub托管你的项目代码
			
    PS:话说自己注册了GitHub都很久了,却没有怎么去弄,现在系统学习一下,也把自己的学习经历总结下来share给大家,希望大家都能把GitHub用起来,把你的项目代码happy地托管起来! 一.基本 ...
    
			
    9. 
						
  9. ASP.NET MVC 5 Web编程5 -- 页面传值的方式
			
    本篇文章将讲述MVC的页面传值方式,具体包括:后端向前端传值(Controller向View传值):前端向后端传值(View向Controller传值):Action与Action之间的传值. 回顾  ...
    
			
    10. 
						
  10. EasyPR--开发详解（4）形态学操作、尺寸验证、旋转等操作
			
    在上一篇深度分析与调优讨论中,我们介绍了高斯模糊,灰度化和Sobel算子.在本文中,会分析剩余的定位步骤. 根据前文的内容,车牌定位的功能还剩下如下的步骤,见下图中未涂灰的部分. 图1 车牌定位步骤  ...
    
			
    11.