電子表格轉身購物車：三步輕鬆實現

葡萄城技术团队發表於2024-08-07

最新技術資源（建議收藏）
https://www.grapecity.com.cn/resources/

在我們的專案當中，經常需要新增一些選擇介面，讓使用者直觀地進行互動，比如耗材、辦公用品、設計稿或者其它可以選擇的內容。

線上商城的商品目錄和購物車無疑是一種大家都很熟悉的互動方式，但是在實際開發中，我們可能會遇到以下幾個問題：

  1. 怎麼及時響應產品的需求，快速實現功能上線？
  2. 怎樣實現靈活變更模板，把資料、模板和實現分離，便於設計同學隨時修改UI？
  3. 怎樣讓使用者獲得熟悉的互動體驗，同時實現前端資料收集和統計？
    這裡給大家提供一個思路，用線上Excel來實現這個功能！本文將展示如何使用純前端表格控制元件，在30分鐘內、三步操作建立產品目錄頁和購物車效果。文末包含demo原始碼，不要錯過。

先來看看完成的效果：

簡單三步建立個性化產品目錄頁

除了支援數百種統計和財務功能的高速計算引擎外，我們還將大量使用SpreadJS內建的 RANGEBLOCKSPARKLINE(template_range, data_expr) - 一個強大的迷你圖功能，允許使用者將單元格範圍模板 (template_range) 定義為單個單元格型別並將該模板應用於單元格以將一組資料（data_expr）載入到模板中。

點選此處下載演示檔案，解壓後直接用瀏覽器開啟index.html即可看到效果。

以下是建立和設計產品目錄所需的內容：

資料來源表

資料來源表包含有關不同產品的資料。它們位於名為 tbProducts 的表中。
此表包含有關名稱、類別、價格、評級等的資訊：

模板表

此頁面包含用於在目錄表上建立產品列表的模板範圍。
首先要做的是排列單元格，然後設定單元格的繫結路徑。
它可以透過 Javascript 使用 SpreadJS 的 setBindingPath 方法來完成。


templateSheet.setBindingPath(0, 0, "Nr");
templateSheet.setBindingPath(0, 1, "Name");
templateSheet.setBindingPath(0, 3, "Price");
templateSheet.setBindingPath(0, 4, "Category");
templateSheet.setBindingPath(0, 5, "Description");
templateSheet.setBindingPath(0, 6, "Image");
templateSheet.setBindingPath(0, 7, "Review");
templateSheet.setBindingPath(0, 8, "Favorite");
templateSheet.setBindingPath(0, 9, "Rating");

當然，上邊這步操作也有不用寫程式碼的方法——用設計器，在下載的安裝包中，從“\SpreadJS.Release.x.x.x\Designer\Designer Runtime”路徑下找到設計器的安裝包，完成安裝後，按照下列步驟操作：

  1. 資料→工作表繫結→欄位列表

  2. 將滑鼠懸停在 Start 分支上並透過單擊綠色 + 按鈕新增欄位（請注意，這裡可以使用“x”按鈕刪除欄位並使用位於分支右側的設定修改這些欄位）

  3. 拖動模板範圍所需單元格中的欄位

渲染表（目錄）

如上面的螢幕截圖所示，此表包含四個主要部分：

按皮膚排序

此皮膚包含一個按鈕列表，可以更改包含有關產品的資料的表格的順序，從目錄表更改產品的順序。

如果使用設計器，執行以下操作：
1.主頁→ 單元格編輯器→ 單元格型別
2.單擊按鈕列表
3.設定專案的文字和值以及按鈕列表物件的不同屬性。
4.新增專案
5.點選確定

另外，還可以使用以下 JavaScript 程式碼新增按鈕列表：

var cellType = new GC.Spread.Sheets.CellTypes.ButtonList();

cellType.items([{text:"Name (asc)",value:0},{text:"Name (desc)",value:1},{text:"Price (lowest)",value:2},text:"Price (highest)",value:3},{text:"Rating (lowest)",value:4},      {text:"Rating (highest)",value:5}]);

cellType.selectedBackColor("#0AA371");

cellType.selectedForeColor("#FFFFFF");

cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single);// allows only 1 item to be selected

catalogSheet.getCell(3, 2).cellType(cellType);

透過使用 ValueChanged 事件，我們可以根據按鈕列表選擇更改位於 Datasource 工作表上的表的順序。

//Sort by panel
catalogSheet.bind(GC.Spread.Sheets.Events.ValueChanged,function(type,args){
    if (args.row ==3 && args.col==2)//only check if the button list value has changed
    {
        var i = 1; var asc = true;
        switch(args.newValue){
            case 1:
            i= 1; asc = false;//sort by Name desc
            break;
            case 2:
            i= 3; asc = true;//sort by Price asc
            break;
            case 3:
            i= 3; asc = false;//sort by price desc
            break;
            case 4:
            i= 8; asc = true;//sort by Rating asc
            break;
            case 5:
            i= 8; asc = false;//sort by Rating desc
            break;
            default:
            i = 1; asc = true; //sort by Name desc     
            break;
             
        }
        spread.suspendPaint();
        //change the sorting
        spread.getSheetFromName("DataSource").sortRange(1, 0, 15, 9, true, [ 
        {index:i, ascending:asc} 
        ]);
        spread.resumePaint();
    }
});

產品列表

產品列表是產品目錄中最重要的部分。這包含產品列表及其有關價格、類別、名稱和影像的各自資訊。

如前所述，我們將使用 RANGEBLOCKSPARKLINE 建立產品列表。
更改單元格寬度 (B6:D10) 以適應上述模板 (Template!A2:E7) 後，在這些單元格上設定如下公式：

=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],index,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))

在這種情況下，索引將是專案的編號。例如，在 B6 上，索引將為 1。

如果這裡只使用 javascript實現，可以用以下程式碼：

//first product
sheet.setFormula(5, 1, "=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],1,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");

對其他單元格重複相同的策略。

選定專案

當使用者使用SelectionChanged事件點選另一個item時，出現在目錄右側的item發生變化，選中item右端的“加號”背景；它變成綠色。

執行此操作的 JavaScript 程式碼如下：

// select items
var row = 5, col =1;
catalogSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
const sheet = args.sheet;
const newRow = args.newSelections[0].row;
const newCol = args.newSelections[0].col;
if ((newRow <5 || newRow > 9)
   || (newCol < 1 || newCol > 3))
return;

//change the item appearing on the right panel
var position = 3*(newRow - 5) + newCol;
sheet.suspendPaint();
sheet.setFormula(5, 5, "=RANGEBLOCKSPARKLINE(Template!H9:O21,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data]," + position + ",SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");

// change the color of the "plus" sign of the selected item
sheet.getCell(row, col).backColor("#dddddd");
sheet.getCell(newRow, newCol).backColor("#53b175");

sheet.resumePaint();
row = newRow;
col = newCol;

新增到購物車按鈕

新增到購物車按鈕是一個簡單的按鈕，顯示可以使用超連結功能呼叫最終將商品新增到購物車的事件或呼叫其他一些電子商務支付功能。該按鈕顯示該專案已新增到購物車的警報。

想了解更多？請參考以下資源：
瞭解更多純前端表格線上demo示例 : https://www.grapecity.com.cn/developer/spreadjs/demo
純前端表格應用場景：https://demo.grapecity.com.cn/spreadjs/mobilesample/

相關文章