摘要:設(shè)置單元格屬性設(shè)置文字設(shè)置背景色公式隨機(jī)數(shù)求和和之和到之和條件開啟引用基本操作添加行列設(shè)置背景圖片設(shè)置和的背景色獲取點(diǎn)擊的和所在的離開事件
初始化表單API
const spreadNS = GC.Spread.Sheets; const SHEETS = new spreadNS.Workbook(this.refs["overseas"]); // set sheet count // SHEETS.setSheetCount(1); const sheet = SHEETS.sheets[0];設(shè)置默認(rèn)屬性
const defaultStyle = new GC.Spread.Sheets.Style(); // 設(shè)置默認(rèn)背景色 // @method1 defaultStyle.backColor = "LemonChiffon"; // @method2 SHEETS.options.backColor = "#ccc"; //defaultStyle.foreColor = "Red"; //defaultStyle.formatter = "0.00"; defaultStyle.font = "bold normal 9px normal" defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; //defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); //defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); //defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); //defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium); sheet.setDefaultStyle(defaultStyle, spreadNS.SheetArea.viewport);表格的四個(gè)部分
spreadNS.SheetArea.viewport // spreadNS.SheetArea include the following parts // colHeader: 1 , // corner: 0 // rowHeader: 2 // viewport: 3 // 改變表頭的背景 Set the backcolor of second row header. sheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");其他配置
// 表格下邊的tab的顏色 sheet.options.sheetTabColor = "red"; // 表格只讀 sheet.options.isProtected = true // 允許cell內(nèi)容移除 activeSheet.options.allowCellOverflow = true; // 第一列不可見 sheet.setColumnVisible(0, false) // 添加tips sheet.comments.add(4, 4, "不要修改!"); // 禁止用戶編輯公式 spread.options.allowUserEditFormula = false; // 不顯示格子的邊 sheet.options.gridline = { color:"red", showVerticalGridline: true, showHorizontalGridline: false }; // 不顯示表頭 activeSheet.options.colHeaderVisible = false; activeSheet.options.rowHeaderVisible = false;減少重繪
spread.reset() // 清空數(shù)據(jù) spread.suspendPaint(); //suspendPaint 暫停重繪 先這樣 很多操作之后 resumePaint spread.addSheet(0); spread.fromJSON(json); // json data spread.resumePaint(); // 調(diào)用resumePaint 重新激活Spread重繪excel 運(yùn)算符
引用運(yùn)算符 含義(示例) :(冒號(hào)) 區(qū)域運(yùn)算符,產(chǎn)生對(duì)包括在兩個(gè)引用之間的所有單元格的引用 (B5:B15) ,(逗號(hào)) 聯(lián)合運(yùn)算符,將多個(gè)引用合并為一個(gè)引用 (SUM(B5:B15,D5:D15)) (空格) 交叉運(yùn)算符產(chǎn)生對(duì)兩個(gè)引用共有的單元格的引用。(B7:D7 C6:C8)設(shè)置單元格屬性
sheet.getCell(2, 1). text("huahua"). // 設(shè)置文字 backColor("rgba(1,1,1,.3)") //設(shè)置背景色公式
// 隨機(jī)數(shù) sheet.setFormula(1, 1, "RandBetween(45,85)"); // 求和 sheet.setFormula(1, 1, "SUM(A1,B1)"); //A1和B1之和 sheet.setFormula(1, 1, "SUM(A1:H1)"); //A1到H1之和 // 條件 sheet.setFormula(4, 1, "IF(A1>10, A1*2, A1*3)");開啟R1C1 引用
// open r1c1 reference SHEETS.options.referenceStyle = 1;基本操作
// 添加行/列 sheet.addRows(1, 1); sheet.addColumns(1, 1); // 設(shè)置背景圖片 activeSheet.getCell(1, 1).backgroundImage("Image file path name");設(shè)置row和column的背景色
/** * @name set the bgColor of column * * @type1 * sheet.getRange(-1, 1, -1, 1).backColor("lightYellow").width(330); * * @name set the bgColor of row * * @type1 * sheet.getRange(0, -1, 1, -1).backColor("lightYellow").height(44) * * @type2 * const rowStyle1 = new spreadNS.Style(); * rowStyle1.backColor = "#bdcde3"; * sheet.setStyle(0, -1, rowStyle1, spreadNS.SheetArea.viewport); */events
// 獲取點(diǎn)擊的cell和所在的sheet SHEETS.bind(spreadNS.Events.EnterCell, function (event, data) { console.log(data.col) console.log(data.row) console.log(data) var activeSheet = data.sheet; activeSheet.startEdit(true); }); // 離開cell事件 sheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (event, infos) { //Reset the backcolor of cell before moving infos.sheet.getCell(infos.row, infos.col).backColor(undefined); });
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/104239.html
摘要:用不到行代碼,在前端實(shí)現(xiàn)的全部功能千萬(wàn)前端開發(fā)者翹首企盼,終發(fā)布更新六大功能特性,帶來(lái)更多便利,用不到行代碼,在前端實(shí)現(xiàn)的全部功能是一款基于的純前端電子表格控件,以高速低耗高度類似可無(wú)限擴(kuò)展為產(chǎn)品特色,提供移動(dòng)跨平臺(tái)和瀏覽器支持,同時(shí)滿足等 用不到100行代碼,在前端實(shí)現(xiàn)Excel的全部功能 千萬(wàn)前端開發(fā)者翹首企盼,SpreadJS V12.2 終發(fā)布更新:六大功能特性,帶來(lái)更多便利,...
摘要:復(fù)制粘貼單元格格式和單元格類型本周,讓我們一起來(lái)學(xué)習(xí)的復(fù)制粘貼單元格格式和單元格類型,希望我的學(xué)習(xí)筆記能夠幫助你們,從零開始學(xué)習(xí),并逐步精通。 復(fù)制粘貼、單元格格式和單元格類型 本周,讓我們一起來(lái)學(xué)習(xí)SpreadJS 的復(fù)制粘貼、單元格格式和單元格類型,希望我的學(xué)習(xí)筆記能夠幫助你們,從零開始學(xué)習(xí) SpreadJS,并逐步精通。 在此前的學(xué)習(xí)筆記中,相信大家已經(jīng)學(xué)會(huì)并熟練掌握了Sprea...
摘要:數(shù)百萬(wàn)前端開發(fā)人員翹首期待的,日前宣布版本正式發(fā)布,全面支持是一款純前端表格控件,也是目前市面上唯一的最接近的純前端控件。葡萄城公司成立于年,是全球領(lǐng)先的集開發(fā)工具商業(yè)智能解決方案管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。 數(shù)百萬(wàn)前端開發(fā)人員翹首期待的SpreadJS,日前宣布V10.2版本正式發(fā)布,全面支持Angular2! SpreadJS 是一款純前端表格控件,也是目前市面上唯一...
摘要:葡萄城的是一個(gè)基于技術(shù)的純控件,控件性能流暢,有類似的在線表格編輯器,適合非專業(yè)程序員設(shè)計(jì)報(bào)表模板,很符合平臺(tái)部分無(wú)編碼開發(fā)的理念。葡萄城控件產(chǎn)品對(duì)于項(xiàng)目的價(jià)值控件主要用于本項(xiàng)目中的報(bào)表設(shè)計(jì),展示,打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 華閩通達(dá) - R 平臺(tái)應(yīng)用所使用產(chǎn)品:SpreadJS ...
摘要:在上一篇文章中,我們學(xué)習(xí)了在中支持綁定的屬性,今天我們來(lái)介紹在中支持哪些事件。詳細(xì)的事件說明,請(qǐng)參考博客。版本即將發(fā)布,更多更好的功能盡在新版本中,敬請(qǐng)期待登錄官網(wǎng),了解更多。 showImg(https://segmentfault.com/img/bVP1Wc?w=900&h=500);SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網(wǎng)格功能...
閱讀 2440·2019-08-29 13:53
閱讀 2518·2019-08-29 11:32
閱讀 3060·2019-08-28 17:51
閱讀 3810·2019-08-26 10:45
閱讀 3529·2019-08-23 17:51
閱讀 2993·2019-08-23 16:56
閱讀 3345·2019-08-23 16:25
閱讀 3100·2019-08-23 14:15