在web中js實現(xiàn)類似excel的表格控件

2019-11-20 09:06:45

字體：大中小

供稿：網(wǎng)友

Execl功能非常強大，內(nèi)置的很多函數(shù)或公式可以大大提高對數(shù)據(jù)的加工處理能力。那么在web中有沒有類似的控件呢？經(jīng)過一番搜尋，發(fā)現(xiàn)handsontable具備了基本的excel功能支持公式，同時能對數(shù)據(jù)進行實時編輯。另外支持拖動復(fù)制、Ctrl+C 、Ctrl+V 等等。在瀏覽器支持方面，它支持以下的瀏覽器： IE7+, FF, Chrome, Safari, Opera。

首先引入相關(guān)庫文件，公式支持不包含在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" ><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容器，然后創(chuàng)建表格控件：

<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({            //提交數(shù)據(jù)的類型 POST GET            type: "POST",            //提交的網(wǎng)址            url: "/services/CSEngine.ashx",            //提交的數(shù)據(jù)            data: { code: value, code2: escaped },            //返回數(shù)據(jù)的格式            datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".            //在請求之前調(diào)用的函數(shù)            //beforeSend: function () { $("#msg").html("logining"); },            //成功返回之后調(diào)用的函數(shù)                   success: function (data) {              // $("#msg").html(decodeURI(data));              newvalue.innerHTML = decodeURI(data);            },            //調(diào)用執(zhí)行后調(diào)用的函數(shù)            complete: function (XMLHttpRequest, textStatus) {              //alert(XMLHttpRequest.responseText);              // alert(textStatus);              //HideLoading();            },            //調(diào)用出錯執(zhí)行的函數(shù)            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是自己實現(xiàn)的C#代碼腳本，需要單擊解析：

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 = "參數(shù)錯誤";      }      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;    }  }}

運行代碼，如下：