在本文中，我將用圖解的方式用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提供了如下特性：
誰適合閱讀本文？
用如下環境進行開發
SpreadJS的授權包括在Wijmo企業中
Wijmo專業 | Wijmo企業 | Wijmo企業可選包 | |
基本widget | ? | ? | - |
SpreadJS | - | ? | - |
SpreadJS設計器及Excel的I / O | - | - | ? |
技術支持 | ? | ? | ? |
Wijmo的個人授權GPL Version 3； 對企業用戶而言，采用Wijmo企業版是性價比非常高的策略。
其中包含在Wijmo企業版中的SpreadJS設計器和Excel I/O對于加快設計SpreadSheet非常有用，如可方便的查看JSON格式數據。
為了使用的SpreadJS，請在HTML中的head標簽中列出描述。（1）在對語言進行說明，（2） - （5）是讀取CSS和jQuery SpreadJS，jQuery的UI。
<!-- SpreadJS語言設置（1）--> <meta name="spreadjs culture" content="zh-cn" /> <!-- jQuery（2） --> <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> <!-- Wijmo CSS（3）--> <link 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 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>
效果截圖：
如同用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中通過設置公式中的單元格進行計算，如求和，平均值，同樣地，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)");
您可以輸出您在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/
新聞熱點
疑難解答
