【圖解】Web前端實現相似Excel的電子表格



在本文中，我將用圖解的方式用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的個人授權基於MIT和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	是否顯示新標籤頁button	true

 

如我們可設定2個引數，來初始為3個標籤頁，同一時候隱藏新建button。程式碼例如以下：

<script id="scriptInit" type="text/javascript">
        $(document).ready( $(function () {
            // SpreadJS 初始化
            $("#wijspread1").wijspread({
                sheetCount: 3, //初始化為3個標籤頁
                newTabVisible:false //隱藏新建標籤頁button
                });
        })
        );
    </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/