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. 简单Linux命令学习笔记
			
    1.查看进程 ps -ef | grep 关键字       /*关键字为服务名*/ netstat -unltp | grep 关键字        /*关键字为服务名或者是端口均可*/ 2.杀死进 ...
    
			
    2. 
						
  2. nuget常用命令
			
    nuget命令的用法: 一.安装 1.安装指定版本类库install-package <程序包名> -version <版本号> 2.安装到指定的项目install-packa ...
    
			
    3. 
						
  3. 我的第一个python程序--给2.x的print代码加上括号
			
    最近想学习一门脚本语言,综合考虑,选择了python. 花了几天时间看完了 简明 Python 教程 ,想着应该写点什么东西才好,刚好我使用的是3.x版本,以前好多2.x的代码都直接报错,尤其是pri ...
    
			
    4. 
						
  4. Java中isAssignableFrom的用法
			
    class1.isAssignableFrom(class2) 判定此 Class 对象所表示的类或接口与指定的 Class 参数所表示的类或接口是否相同,或是否是其超类或超接口.如果是则返回 tru ...
    
			
    5. 
						
  5. Atitit 硬件 软件 的开源工作 差异对比
			
    Atitit 硬件 软件 的开源工作 差异对比 1.1. 模块化,标准化,以及修改的便捷性1 1.2. 生产和发布成本 1 1.3.   3. 入行门槛搞2 1.4.  在软件业极度发达的今天,任何具 ...
    
			
    6. 
						
  6. WCF学习之旅—WCF中传统的异常处理（十六）
			
    WCF中的异常处理 在软件开发过程中,不可能没有异常的出现,所以在开发过程中,对不可预知的异常进行解决时,异常处理显得尤为重要.对于一般的.NET系统来说,我们简单地借助try/catch可以很容易地 ...
    
			
    7. 
						
  7. 解析大型.NET ERP系统 高质量.NET代码设计模式
			
    1 缓存 Cache 系统中大量的用到缓存设计模式,对系统登入之后不变的数据进行缓存,不从数据库中直接读取.耗费一些内存,相比从SQL Server中再次读取数据要划算得多.缓存的基本设计模式参考下面 ...
    
			
    8. 
						
  8. [C#] 走进异步编程的世界 - 在 GUI 中执行异步操作
			
    走进异步编程的世界 - 在 GUI 中执行异步操作 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5877042.html 序 这是继<开始接 ...
    
			
    9. 
						
  9. ASP.NET MVC 5调用其他Action
			
    引用代码: @Html.Action("Index", "BaseData", new { d = "variety" }) 后台获取参数: ...
    
			
    10. 
						
  10. Vertica 安装，建库，新建测试用户并授予权限，建表，入库
			
    测试环境:RHEL 6.4 + Vertica 6.1.3-7 需求:搭建Vertica数据库3节点的测试环境,建立测试用户,建表,测试数据入库. 1.各节点关闭防火墙和SELinux,配置主机名,I ...
    
			
    11.