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

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

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

rush:xhtml;">

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

rush:xhtml;">

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

rush:js;">

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

<div class="jb51code">
<pre class="brush:csharp;">
public class CSEngine : IHttpHandler {
private static int count = 0;
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 = "参数<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>";
  }
  else
  {
    ScriptOptions options = ScriptOptions.Default
     .AddReferences(
       Assembly.GetAssembly(typeof(DBServices.DataAccess))
      )
     //.AddImports("Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.Data")
     //.AddImports("Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.Data.<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>Client")
     .AddImports("DBServices");
    var state = <a href="https://www.jb51.cc/tag/csharpscript/" target="_blank" class="keywords">csharpscript</a>.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;
}
}

}

运行代码，如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。