当前位置: 首页 > 后端技术 > Node.js

在线excel开发新手学习笔记——表单控件常用于工作簿前端页面

时间:2023-04-03 19:04:35 Node.js

为了方便表单的设计和填写,今天尝试使用一个纯前端的表单控件。控件下载地址:https://www.grapecity.com.cn/...首先初始化Spreadvarspread=newGC.Spread.Sheets.Workbook(document.getElementById('ss'),{sheetCount:2});这时候,表格已经出现在页面上了。可以使用以下方法来增加、清除和删除表格:/*--------------------展开表格-------------------------*/spread.addSheet(0);console.log(spread.getSheetCount());//3spread.setSheetCount(1);console.log(spread.getSheetCount());//3两个varsheet=spread.getSheet(0);varsheet1=spread.getSheetFromName('Sheet3');console.log(sheet==sheet1);//结果:True,此时我索引为0的sheet被命名为Sheet3//spread.removeSheet(0);//spread.clearSheets();//清除,空白spread.setSheetCount(4);console.log(spread.getActiveSheetIndex());//获取活动表索引spread.setActiveSheetIndex(3);//设置activesheet,控制sheet,标签的一些显示,标签名称的背景色等/*------------------表单名称选项卡-------------------------*///spread.options.tabStripVisible=false;//标签栏显示控件//spread.options.newTabVisible=false;varcurSheet=spread.getActiveSheet();//curSheet.options.sheetTabColor='blue';//设置当前sheetTab背景色,spread.options.tabEditable=true;//双击是否修改表单名称spread.options.allowSheetReorder=false;//sheet顺序是否可以通过拖动调整//spread.startSheetIndex(1);//设置起始表的索引spread.options.tabStripRatio=0.8;//设置TabStrip的宽度,取值0-1滚动条相关设置//水平,垂直;两个都;none拖动滚动条给出提示,默认为nonespread.options.showScrollTip=GC.Spread.Sheets.ShowScrollTip.horizo??ntal;spread.options.showVerticalScrollbar=true;//控制水平或垂直滚动??条是否显示showVerticalScrollbar,showHorizo??ntalScrollbarspread.options.scrollbarShowMax=true;//是否根据表单的总行数和列数显示滚动条spread.options.scrollbarMaxAlign=true;//滚动条末端是否与视图对齐窗体最后一行或最后一列的背景//spread.options.backColor='red';//spread.options.backgroundImage='img/bag.jpg';//同时设置,图片优先//spread.options.backgroundImageLayout=GC.Spread.Sheets.ImageLayout.stretch;//拉伸、居中、缩放、无Sheets.Events.ActiveSheetChanged;spread.bind(activeSheetChanged,function(){console.log('activeSheetChanged');})//spread.suspendEvent();//暂停触发事件//spread.resumeEvent();//恢复触发事件varSelectionChanging=GC.Spread.Sheets.事件.SelectionChanging;spread.bind(SelectionChanging,function(){console.log('SelectionChanging');})varCellClick=GC.Spread.Sheets.Events.CellClick;spread.bind(CellClick,function(){console.log('CellClick');})varSelectionChanged=GC.Spread.Sheets.Events.SelectionChanged;spread.bind(SelectionChanged,function(){console.log('SelectionChanged');})varEditStarting=GC.Spread.Sheets.Events.EditStarting;spread.bind(EditStarting,function(){console.log('EditStarting');})varEditEnded=GC.Spread.Sheets.Events.EditEnded;spread.bind(EditEnded,function(){console.log('EditEnded');})当事件被触发时,控制台打印出相应的提示:免费在线版Excel:https://demo.grapecity.com.cn...