SpreadJS結(jié)合40余年專業(yè)控件技術(shù)和在電子表格應(yīng)用領(lǐng)域的經(jīng)驗(yàn)而推出的純前端表格控件，基于 HTML5，兼容 450 多種 Excel 公式，具備“高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、明源云、遠(yuǎn)光軟件等知名企業(yè)青睞，被中國(guó)軟件行業(yè)協(xié)會(huì)認(rèn)定為“中國(guó)優(yōu)秀軟件產(chǎn)品”。SpreadJS在界面和功能上與 Excel 高度類似，但又不局限于 Excel，而是為企業(yè)信息化系統(tǒng)提供 表格文檔協(xié)同編輯、 數(shù)據(jù)填報(bào) 和 類 Excel 報(bào)表設(shè)計(jì) 的應(yīng)用場(chǎng)景支持，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

獲取SpreadJS最新正式版下載

在我們的項(xiàng)目當(dāng)中，經(jīng)常需要添加一些選擇界面，讓用戶直觀地進(jìn)行交互，比如耗材、辦公用品、設(shè)計(jì)稿或者其它可以選擇的內(nèi)容。

在線商城的商品目錄和購物車無疑是一種大家都很熟悉的交互方式，但是在實(shí)際開發(fā)中，我們可能會(huì)遇到以下幾個(gè)問題：

1. 怎么及時(shí)響應(yīng)產(chǎn)品的需求，快速實(shí)現(xiàn)功能上線？
2. 怎樣實(shí)現(xiàn)靈活變更模板，把數(shù)據(jù)、模板和實(shí)現(xiàn)分離，便于設(shè)計(jì)同學(xué)隨時(shí)修改UI？
3. 怎樣讓用戶獲得熟悉的交互體驗(yàn)，同時(shí)實(shí)現(xiàn)前端數(shù)據(jù)收集和統(tǒng)計(jì)？

這里給大家提供一個(gè)思路，用在線Excel來實(shí)現(xiàn)這個(gè)功能！本文將展示如何使用 SpreadJS 純前端表格控件，在30分鐘內(nèi)、三步操作創(chuàng)建產(chǎn)品目錄頁和購物車效果。SpreadJS是葡萄城結(jié)合 40 余年專業(yè)控件技術(shù)和在電子表格應(yīng)用領(lǐng)域的經(jīng)驗(yàn)而推出的純前端表格控件，它是一個(gè)基于 HTML5的 JavaScript 電子表格組件，可為我們的用戶提供熟悉的類似 Excel 的電子表格體驗(yàn)。

先來看看完成的效果：

簡(jiǎn)單三步創(chuàng)建個(gè)性化產(chǎn)品目錄頁

除了支持?jǐn)?shù)百種統(tǒng)計(jì)和財(cái)務(wù)功能的高速計(jì)算引擎外，我們還將大量使用SpreadJS內(nèi)置的 RANGEBLOCKSPARKLINE(template_range, data_expr) - 一個(gè)強(qiáng)大的迷你圖功能，允許用戶將單元格范圍模板 (template_range) 定義為單個(gè)單元格類型并將該模板應(yīng)用于單元格以將一組數(shù)據(jù)（data_expr）加載到模板中。

以下是創(chuàng)建和設(shè)計(jì)產(chǎn)品目錄所需的內(nèi)容：

數(shù)據(jù)源表

數(shù)據(jù)源表包含有關(guān)不同產(chǎn)品的數(shù)據(jù)。它們位于名為 tbProducts 的表中。

此表包含有關(guān)名稱、類別、價(jià)格、評(píng)級(jí)等的信息：

模板表

此頁面包含用于在目錄表上創(chuàng)建產(chǎn)品列表的模板范圍。

首先要做的是排列單元格，然后設(shè)置單元格的綁定路徑。

 它可以通過 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");

當(dāng)然，上邊這步操作也有不用寫代碼的方法——用SpreadJS設(shè)計(jì)器，下載SpreadJS安裝包，在下載的安裝包中，從“\SpreadJS.Release.x.x.x\Designer\Designer Runtime”路徑下找到設(shè)計(jì)器的安裝包，完成安裝后，按照下列步驟操作：

1. 數(shù)據(jù)→工作表綁定→字段列表
2. 將鼠標(biāo)懸停在 Start 分支上并通過單擊綠色 + 按鈕添加字段（請(qǐng)注意，這里可以使用“x”按鈕刪除字段并使用位于分支右側(cè)的設(shè)置修改這些字段）
3. 拖動(dòng)模板范圍所需單元格中的字段

渲染表（目錄）

如上面的屏幕截圖所示，此表包含四個(gè)主要部分：

按面板排序

此面板包含一個(gè)按鈕列表，可以更改包含有關(guān)產(chǎn)品的數(shù)據(jù)的表格的順序，從目錄表更改產(chǎn)品的順序。

如果使用SpreadJS設(shè)計(jì)器，執(zhí)行以下操作：

1. 主頁→ 單元格編輯器→ 單元格類型
2. 單擊按鈕列表
3. 設(shè)置項(xiàng)目的文本和值以及按鈕列表對(duì)象的不同屬性
4. 添加項(xiàng)目
5. 點(diǎn)擊確定

另外，還可以使用以下 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 事件，我們可以根據(jù)按鈕列表選擇更改位于 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();
}
});

產(chǎn)品列表

產(chǎn)品列表是產(chǎn)品目錄中最重要的部分。這包含產(chǎn)品列表及其有關(guān)價(jià)格、類別、名稱和圖像的各自信息。

如前所述，我們將使用 RANGEBLOCKSPARKLINE 創(chuàng)建產(chǎn)品列表。

更改單元格寬度 (B6:D10) 以適應(yīng)上述模板 (Template!A2:E7) 后，在這些單元格上設(shè)置如下公式：

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

在這種情況下，索引將是項(xiàng)目的編號(hào)。例如，在 B6 上，索引將為 1。

如果這里只使用 javascript實(shí)現(xiàn)，可以用以下代碼：

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

對(duì)其他單元格重復(fù)相同的策略。

選定項(xiàng)目

當(dāng)用戶使用SelectionChanged事件點(diǎn)擊另一個(gè)item時(shí)，出現(xiàn)在目錄右側(cè)的item發(fā)生變化，選中item右端的“加號(hào)”背景；它變成綠色。

執(zhí)行此操作的 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;

添加到購物車按鈕

添加到購物車按鈕是一個(gè)簡(jiǎn)單的按鈕，顯示可以使用超鏈接功能調(diào)用最終將商品添加到購物車的事件或調(diào)用其他一些電子商務(wù)支付功能。該按鈕顯示該項(xiàng)目已添加到購物車的警報(bào)。

本文內(nèi)容源自