简单三步即可实现在我们的项目中，经常需要添加一些选择界面，让用户直观的进行交互，比如耗材、办公用品、设计稿或者其他可选内容。网上商城中的商品目录和购物车无疑是大家比较熟悉的交互模式，但在实际开发中，我们可能会遇到以下问题：如何及时响应商品需求，快速实现线上功能？如何灵活更改模板，将数据、模板和实现分离，让设计同学可以随时修改UI？如何在实现前端数据采集和统计的同时，让用户获得熟悉的交互体验？这里给大家提供一个使用在线Excel实现这个功能的思路！本文将在30分钟三步内展示如何使用纯前端表格控件制作商品目录页和购物车效果。demo源码附在文末，不要错过。先来看看完成后的效果：简单三步，打造个性化商品目录页。除了支持数百种统计和财务功能的高速计算引擎，我们还将大量使用SpreadJS内置的RANGEBLOCKSPARKLINE(template_range,data_expr)-一个强大的迷你图功能，允许用户定义单元格范围模板(template_range)作为单个单元格类型并将该模板应用于单元格以将一组数据(data_expr)加载到模板中。单击此处下载演示文件。解压后直接用浏览器打开index.html可以看到效果。以下是创建和设计产品目录所需的内容：数据源表数据源表包含有关不同产品的数据。它们位于名为tbProducts的表中。此表包含有关名称、类别、价格、评级等的信息：模板表此页面包含一系列用于在目录表上创建产品列表的模板。首先要做的是排列单元格，然后设置单元格的绑定路径。它可以使用SpreadJS的setBindingPath方法从Javascript完成。templateSheet.setBindingPath(0,0,"Nr");templateSheet.setBindingPath(0,1,"名称");templateSheet.setBindingPath(0,3,"价格");templateSheet.setBindingPath(0,4,"类别");templateSheet.setBindingPath(0,5,"描述");templateSheet.setBindingPath(0,6,"图片");templateSheet.setBindingPath(0,7,"评论");templateSheet.setBindingPath(0,8,"Favorite");templateSheet.setBindingPath(0,9,"Rating");当然也有不用写代码就可以完成上面这一步的方法——使用设计器，在下载的安装包中，从"\SpreadJS.Release.x.x.x\Designer\DesignerRuntime”路径找到设计器的安装包，安装完成后，按照以下步骤操作：数据→工作表绑定→字段列表将鼠标悬停在开始分支上，点击绿色+添加字段按钮（请注意，此处您可以使用“x”按钮删除字段并使用位于分支右侧的设置修改它们）将字段拖动到所需的单元格中ls的模板范围呈现表格（目录）如上面的屏幕截图所示，该表格包含四个主要部分：按面板排序该面板包含一个按钮列表，用于更改包含有关数据的表格的顺序产品，并更改目录中产品的顺序。如果使用设计器，请执行以下操作：1.主页→单元格编辑器→单元格类型2.单击按钮列表3.设置项目的文本和值以及按钮列表对象的不同属性。4.添加项目5.单击确定或者，您也可以使用以下JavaScript代码添加按钮列表：varcellType=newGC.Spread.Sheets.CellTypes.ButtonList();cellType.items([{text:"Name(asc)",value:0},{text:"Name(desc)",value:1},{text:"价格（最低）",value:2},text:"价格（最高）",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);//只允许选择1项catalogSheet.getCell(3,2).cellType(cellType);通过使用ValueChanged事件，我们可以通过列表选择更改位于数据源工作表上的表的顺序。//按panelcatalogSheet.bind(GC.Spread.Sheets.Events.ValueChanged,function(type,args){if(args.row==3&&args.col==2)//只检查按钮列表值已更改{vari=1;varasc=true;switch(args.newValue){case1:i=1;asc=false;//按名称排序descbreak;case2:i=3;asc=true;//按价格排序ascbreak;case3:i=3;asc=false;//按价格排序descbreak;case4:i=8;asc=true;//按评级排序ascbreak;case5:i=8;asc=false;//按评分排序descbreak;默认值：i=1;asc=true;//按名称排序descbreak;}spread.suspendPaint();//更改排序spread.getSheetFromName("数据源").sortRange(1,0,15,9,true,[{index:i,升序: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，index会是1，如果这里只使用javascript，可以使用如下代码：//firstproductsheet.setFormula(5,1,"=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],1,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");对其他单元格重复相同的策略。SelectedItems当用户使用SelectionChanged事件点击另一个项目时，出现在列表右侧的项目发生变化，并且项目右端的“加号”背景被选中；它变成绿色。执行此操作的JavaScript代码如下：//选择项目varrow=5,col=1;catalogSheet.bind(GC.Spread.Sheets.Events.SelectionChanged,function(sender,args){constsheet=args.sheet;constnewRow=args.newSelections[0].row;constnewCol=args.newSelections[0].col;if((newRow<5||newRow>9)||(newCol<1||newCol>3))return;//改变右边面板出现的itemvarposition=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))))");//改变“加号”的颜色所选项目的符号sheet.getCell(row,col).backColor("#dddddd");sheet.getCell(newRow,newCol).backColor("#53b175");sheet.resumePaint();row=newRow;col=newCol;CartbuttonAddtoCartbutton是一个简单的按钮，显示您可以使用超链接函数调用最终将项目添加到购物车的事件或调用一些其他电子商务支付功能。按钮显示商品已添加到购物车报警。想知道更多？请参考以下资源：了解更多纯前端表格在线demo示例：https://demo.grapecity.com.cn...纯前端表格应用场景：https://www.grapecity.com.cn/...移动端示例（扫码体验）：http://demo.grapecity.com.cn/...
