在本文中，我將用圖解的方式用Wijmo（JavaScript庫）中的SpreadJS來一步一步實現網頁上的電子表格產品SpreadSheet(例如可構建Office 365 Excel產品、Google的在線SpreadSheet).
博文簡介：
Wijmo控件，是葡萄城提供的HTML\JavaScript庫，目前最新版是2014 V2(2014.7.22號發佈)，支持jQuery UI和jQuery、jQuery Mobile、Angular.js、Bootstrap.js、Knockout.js等。同時，Wijmo提供了很多小部件(UI 控件), 以此非常方便用來構建一個Web應用程序或者網站。
其中，Wijmo的SpreadJS提供瞭如下特性：
由HTML5顯示電子表格，可方便數據輸入
可方便的設定顏色、邊框、字體
可使用類似Excel公式
可兼容JSON、CSV的數據輸入、輸出
可進行數據分析：條件格式過濾等
Cell圖形展示
日期、IME格式
自定義的輸入單元格類型
觸摸手勢支持
圖形、圖像的應用
本文將涉及1~4點。
誰適合閱讀本文？
如果你想了解Web站點和Web應用程序的構建技術
如果你想在短時間內構建一個複雜的SpreadSheet類型的網站
如果您想用純前端、HTML5方式實現Web站點
必要的環境
用如下環境進行開發
Wijmo 2014 V2的Spread JS 3.20142.11
jQuery 1.8.2
Windows 8.1 64位版本
IE瀏覽器11、Chrome 36.0.1985.125 m
SpreadJS版本和Wijmo許可證
SpreadJS的授權包括在Wijmo企業中
Wijmo專業 | Wijmo企業 | Wijmo企業可選包 | |
基本widget | - | ||
SpreadJS | - | - | |
SpreadJS設計器及Excel的I / O | - | - | |
技術支持 |
Wijmo的個人授權基於GPL Version 3； 對企業用戶而言，採用Wijmo企業版是性價比非常高的策略。
其中包含在Wijmo企業版中的SpreadJS設計器和Excel I\O對於加快設計SpreadSheet非常有用，如可方便的查看JSON格式數據。
使用前的準備SpreadJS CDN
爲了使用的SpreadJS，請在HTML中的head標籤中列出描述。（1）在對語言進行說明，（2） - （5）是讀取css和jQuery SpreadJS，jQuery的UI。
<!-- SpreadJS語言設置（1）--> <meta name="spreadjs culture" content="zh-cn" /> <!-- jQuery、jQurey UI （2） --> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!-- Wijmo CSS（3）--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!-- SpreadJS（4） --> <script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.3.20142.11.min.js" type="text/javascript"></script> <!-- SpreadJS CSS（5）--> <link href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.3.20142.11.css" rel="stylesheet" type="text/css" />
首先，讓我們來顯示電子表格
首先, 讓我們試着簡單地顯示一個電子表格，您可以通過在HTML中，對wijspread元素, 安裝如下的方法查看空電子表格，代碼如下所示：
<script id="scriptInit" type="text/javascript">
$(document).ready( $(function () { // SpreadJS 初始化
$("#wijspread1").wijspread();
})
); </script>備註：如果不指定div元素的大小電子表格的會在瀏覽器顯示全屏，故通過對指定大小限制電子表格的顯示範圍。
SpreadJS div元素的定義
<div id="wijspread1" style="width: 480px; height: 320px; border: 1px solid gray"/>
SpreadJS在網頁上顯示空電子表格如圖所示：
這個簡單的電子表格，此時已經神奇的擁有基本功能，可以輸入數字或字母，並可以在單元格中輸入公式。
通過JavaScript對象中的參數設置到wijspread方法的參數，您可以自定義初始顯示。我表2列出了主要參數。
wijspread的主要參數和默認值：
參數名稱 | 參數說明 | 初始值 |
sheetCount | Sheet標籤頁數 | 1 |
activeSheetIndex | 最初顯示錶標籤頁 | 0 |
tabEditable | 是否可編輯工作表名稱 | true |
allowUserResize | 是否更改列的大小 | True |
allowUserZoom | 是否可變焦 | True |
newTabVisible | 是否顯示新標籤頁按鈕 | true |
如我們可設置2個參數，來初始爲3個標籤頁，同時隱藏新建按鈕，代碼如下：
<script id="scriptInit" type="text/javascript">
$(document).ready( $(function () { // SpreadJS 初始化
$("#wijspread1").wijspread({
sheetCount: 3, //初始化爲3個標籤頁
newTabVisible:false //隱藏新建標籤頁按鈕 });
})
); </script>
效果截圖：
在JavaScript中操作SpreadJS電子表格
如同用Visual Basic來操作Excel的VBA，實現了Excel電子表格的操作；在這裏，你也可以用JavaScript操縱SpreadJS 電子表格。
爲了操作電子表格，首先需要拿到wijspread對象，從而可以得到SpreadJS對象對應的表，可以獲得表對象、單元格Cell對象等。然後，可以逐個進行每個對象的實際操作。
如下的代碼是通過調節單元格大小、設置字體、以及給文本單元格中賦值、autoFitColumn / autoFitRow方法的大小的一個例子。
// 獲得Spread 對象 var spread = $("#wijspread1").wijspread("spread"); // 獲得當前激活的標籤頁 var activeSheet = spread.getActiveSheet(); // 獲得第2行2列單元格 var cell = activeSheet.getCell(1, 1); // 對這個單元格進行賦值
cell.value("Wijmo SpreadJS"); //單元格設置字體大小
cell.font("15pt 宋體"); // 當前標籤頁自動進行行、列適應大小
activeSheet.autoFitColumn(1);
activeSheet.autoFitRow(1);
效果截圖：
通過利用getCells方法，而不是getCell方法可以操作同時獲得在一個範圍內的多個單元：
// 獲得第2行2列 ~ 第4行5列，並設置背景色 var cell = activeSheet.getCells(1, 1, 3, 4)
cell.backColor("#00ff00");同時，通過產生LineBorder對象的邊界設置爲小區設置單元，borderBottom borderRight的，borderLeft，每個方法borderTop。
// 獲得LineBorder屬性 var lineBorder = new $.wijmo.wijspread.LineBorder("#000000", $.wijmo.wijspread.LineStyle.thin); // 設置邊框 cell.borderTop(lineBorder);
cell.borderBottom(lineBorder);
cell.borderLeft(lineBorder);
cell.borderRight(lineBorder);
您還可以設置邊框的類型，通過修改LineStyle第二個參數-使用LineBorder。下表列出主要邊框設置
邊框名稱 | 備註 |
thin | 細實線 |
medium | 粗實線 |
thick | 粗實線 |
dashed | 虛線 |
dotted | 點線 |
dashDot | 點虛線 |
在Excel中，有合併單元格的要求；使用SpreadJS，您也可以使用addSpan方法來合併多個單元格在工作表上，結果如同Excel一樣：
// 列結合 activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.colHeader); // 行結合 activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.rowHeader); // 單元格結合 activeSheet.addSpan(0, 0, 2, 4, $.wijmo.wijspread.SheetArea.viewport);
可以使用類似Excel的公式和函數
您可以在Excel中通過設置公式中的單元格進行計算，如求和，平均值，同樣地，SpreadJS也能幫您實現類似工作： Formula Functions
如下的例子中，顯示了平均值（AVERAGE函數）和總計（SUM函數）。您可以在單元格中設置公式的方法顯示結果。
activeSheet.getCell(0, 0).value('考試成績'); // 各科成績
activeSheet.getCell(2, 0).value('語文');
activeSheet.getCell(2, 1).value(80);
activeSheet.getCell(3, 0).value('數學');
activeSheet.getCell(3, 1).value(70);
activeSheet.getCell(4, 0).value('英語');
activeSheet.getCell(4, 1).value(90);
activeSheet.getCell(5, 0).value('政治');
activeSheet.getCell(5, 1).value(45); // 總分和平均分
activeSheet.getCell(6, 0).value("總分"); // 總分
activeSheet.getCell(6, 1).formula("SUM(B3:B6)");
activeSheet.getCell(7, 0).value('平均分'); //平均分
activeSheet.getCell(7, 1).formula("AVERAGE(B3:B6)");
使用CSV或JSON的輸入和輸出數據
您可以輸出您在SpreadJS輸入的數據，或者輸入來自外部的數據到反向。格式與相應的CSV和JSON。
我會在SpreadJS對象中輸入和輸出的JSON的toJSON / fromJSON方法，同時也會用到JSON.stringify\parse方法。
//數據輸出 function ExportJSON()
{ // 獲得Spread 對象 var spread = $("#wijspread1").wijspread("spread"); var jsonStr = JSON.stringify(spread.toJSON());
$("#jsonCode").html(jsonStr);
} ////數據輸入 function ImportJSON()
{ // 獲得Spread 對象 var spread = $("#wijspread1").wijspread("spread"); var jsonObj = JSON.parse($("#jsonCode").html());
spread.fromJSON(jsonObj);
}
效果截圖：
另一方面，以CSV的情況下，我將使用getCsv表對象中，該方法setCsv。Excel作爲也就是使用CSV將容納單元的情況下，輸入和輸出。您也可以指定起始位置和範圍，單元格的分隔符。
//導出CSV字符串 function ExportCSV() { // 獲得Spread 對象 var spread = $("#wijspread1").wijspread("spread");
var csvString = spread.getActiveSheet().getCsv( 0, // 開始行
0, // 開始列
10, // 行數
5, // 列數
"\n", // 行分割字符
"," // 列分割字符 );
$("#jsonCode").html(csvString);
} //導入CSV字符串 function ImportCSV() { // 獲得Spread 對象 var spread = $("#wijspread1").wijspread("spread"); var csvString = $("#jsonCode").html();
spread.getActiveSheet().setCsv( 0, // 開始行
0, // 開始列
csvString, // CSV字符串
"\n", // 行分割字符
",", // 列分割字符
$.wijmo.wijspread.TextFileOpenFlags.None // 導入選項 );
}
但應注意的是，能在表4中指定的值來setCsv方法的導入標記。默認爲無。
TextFileOpenFlags選項 | 選項的內容 |
ImportFormula | 導入公式 |
ncludeColumnHeader | 包含列標題 |
IncludeRowHeader | 有標題行 |
None | 無（默認) |
UnFormatted | 格式化的數據 |
總結
在這篇文章中，通過代碼實例和圖解的方式，用Wijmo庫提供的SpreadJS JavaScript組件來實現電子表格。SpreadJS提供了數據錄入和計算，一級數據的顯示，如導入和導出爲CSV / JSON格式，可用於在Web瀏覽器上進行瀏覽。這種方法，對設計Web前端的類似Excel的電子表格非常有用的。
在Wijmo，可選包Wijmo企業可以作爲一個選項，以採取更方便SpreadJS優勢。通過使用包含在此選項Spread設計器，您可以創建一個獨立的應用程序的數據SpreadJS。在Excel中的IO服務允許您與您在SpreadJS創建或導入Excel文件中的數據輸出Excel文件。
---------------------------------------------------------------------------
Wijmo中文網站：http://wijmo.gcpowertools.com.cn/
Wijmo使用文檔： http://wijmo.com/docs/wijmo/#WijmoUserGuide.html
Wijmo在線Demo：http://wijmo.com/demos/