如何在web中实现类似excel的表格控件
程序员文章站
2022-03-30 16:01:10
...
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 }
运行代码,如下:
下一篇: 怎样局部更新Razor页面