您好,欢迎访问一九零五行业门户网

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

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 else16 {17 scriptoptions options = scriptoptions.default18 .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 //error36 console.writeline(count);37 }38 }39 40 public bool isreusable {41 get {42 return false;43 }44 }45 46 }
运行代码,如下:
其它类似信息

推荐信息