首页 / HTML / 如何在web中实现类似excel的表格控件

如何在web中实现类似excel的表格控件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何在web中实现类似excel的表格控件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7471字，纯文字阅读大概需要11分钟。

内容图文

　　Execl功能非常强大，内置的很多函数或公式可以大大提高对数据的加工处理能力。那么在web中有没有类似的控件呢？经过一番搜寻，发现handsontable具备了基本的excel功能支持公式，同时能对数据进行实时编辑。另外支持拖动复制、Ctrl+C 、Ctrl+V 等等。在浏览器支持方面，它支持以下的浏览器： IE7+, FF, Chrome, Safari, Opera。

首先引入相关库文件，公式支持不包含在handsontable.full.js中，需要单独引入：

 1 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/jquery/jquery-1.10.2.js"></script>
 2 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.js"></script>
 3 <link rel="stylesheet" media="screen" href="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.css">
 4 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/lodash/lodash.js"></script>
 5 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/underscore.string/underscore.string.js"></script>
 6 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/moment/moment.js"></script>
 7 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numeral/numeral.js"></script>
 8 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numericjs/numeric.js"></script>
 9 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/js-md5/md5.js"></script>
10 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/jstat/jstat.js"></script>
11 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/formulajs/formula.js"></script>
12 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/parser.js"></script>
13 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/ruleJS.js"></script>
14 <script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.formula.js"></script>

在HTML中放置一个Div容器来存放handsontable控件：

1 <body>
2     <div id="handsontable-code"></div>
3 </body>

在javascript代码中，首先获取div容器，然后创建表格控件：

 1   


其中 =SUM(B5,E3)的公式是RuleJs提供的，return 1+2是自己实现的C#代码脚本，需要单击解析：




 1 public class CSEngine : IHttpHandler {
 2     private static int count = 0;
 3     public void ProcessRequest (HttpContext context) {
 4         context.Response.ContentType = "text/plain";
 5 
 6         try
 7         {
 8             count++;
 9             string ret = "";
10             string code = context.Request["code"].ToString();
11             if (string.IsNullOrEmpty(code))
12             {
13                 ret = "参数错误";
14             }
15             else
16             {
17                 ScriptOptions options = ScriptOptions.Default
18                   .AddReferences(
19                       Assembly.GetAssembly(typeof(DBServices.DataAccess))
20                    )
21                   //.AddImports("System.Data")
22                   //.AddImports("System.Data.SqlClient")
23                   .AddImports("DBServices");
24                 var state = CSharpScript.RunAsync(code, options).Result.ReturnValue;
25                 ret = state.ToString();
26 
27                 state = null;
28                 options = null;
29             }
30             Console.WriteLine(count);
31             context.Response.Write(ret);
32         }
33         catch(Exception ex)
34         {
35             //error
36             Console.WriteLine(count);
37         }
38     }
39 
40     public bool IsReusable {
41         get {
42             return false;
43         }
44     }
45 
46 }




运行代码，如下：


如何在web中实现类似excel的表格控件 - 文章图片


                
                
                
内容总结

                

                    

                        以上是互联网集市为您收集整理的如何在web中实现类似excel的表格控件全部内容，希望文章能够帮你解决如何在web中实现类似excel的表格控件所遇到的程序开发问题。
                        如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
                    

                

                
内容备注

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
                    

                

                
内容手机端

                

                    

                    

                        
扫描二维码推送至手机访问。

                        
本文链接：https://qyyshop.com/info/394732.html

                    

                

                
                

                
来源：【匿名】