spreadjs使用

madthumb 發布于2019-08-23 17:51 / 3491人閱讀

摘要：設置單元格屬性設置文字設置背景色公式隨機數求和和之和到之和條件開啟引用基本操作添加行列設置背景圖片設置和的背景色獲取點擊的和所在的離開事件

初始化表單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];

設置默認屬性

const defaultStyle = new GC.Spread.Sheets.Style();
// 設置默認背景色
// @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);

表格的四個部分

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內容移除
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() // 清空數據 
spread.suspendPaint();  //suspendPaint 暫停重繪  先這樣 很多操作之后 resumePaint
spread.addSheet(0);
spread.fromJSON(json);  // json data
spread.resumePaint();   // 調用resumePaint 重新激活Spread重繪

excel 運算符

引用運算符 含義（示例）
:（冒號） 區域運算符，產生對包括在兩個引用之間的所有單元格的引用 (B5:B15)
,（逗號） 聯合運算符，將多個引用合并為一個引用 (SUM(B5:B15,D5:D15))
（空格） 交叉運算符產生對兩個引用共有的單元格的引用。(B7:D7 C6:C8)

設置單元格屬性

      
sheet.getCell(2, 1).
text("huahua").             // 設置文字 
backColor("rgba(1,1,1,.3)") //設置背景色

公式

// 隨機數 
 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);

// 設置背景圖片
activeSheet.getCell(1, 1).backgroundImage("Image file path name");

設置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

// 獲取點擊的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);
});

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104239.html

SpreadJS 純前端表格控件 V12.2 發布更新

摘要：用不到行代碼，在前端實現的全部功能千萬前端開發者翹首企盼，終發布更新六大功能特性，帶來更多便利，用不到行代碼，在前端實現的全部功能是一款基于的純前端電子表格控件，以高速低耗高度類似可無限擴展為產品特色，提供移動跨平臺和瀏覽器支持，同時滿足等用不到100行代碼，在前端實現Excel的全部功能千萬前端開發者翹首企盼，SpreadJS V12.2 終發布更新：六大功能特性，帶來更多便利，...

FrozenMap 2019-08-26 10:45 評論0 收藏0
從零開始，SpreadJS新人學習筆記【第5周】

摘要：復制粘貼單元格格式和單元格類型本周，讓我們一起來學習的復制粘貼單元格格式和單元格類型，希望我的學習筆記能夠幫助你們，從零開始學習，并逐步精通。復制粘貼、單元格格式和單元格類型本周，讓我們一起來學習SpreadJS 的復制粘貼、單元格格式和單元格類型，希望我的學習筆記能夠幫助你們，從零開始學習 SpreadJS，并逐步精通。在此前的學習筆記中，相信大家已經學會并熟練掌握了Sprea...

shadowbook 2019-08-26 10:18 評論0 收藏0
SpreadJS 純前端表格控件推出新版本，正式支持Angular 2

摘要：數百萬前端開發人員翹首期待的，日前宣布版本正式發布，全面支持是一款純前端表格控件，也是目前市面上唯一的最接近的純前端控件。葡萄城公司成立于年，是全球領先的集開發工具商業智能解決方案管理系統設計工具于一身的軟件和服務提供商。數百萬前端開發人員翹首期待的SpreadJS，日前宣布V10.2版本正式發布，全面支持Angular2！ SpreadJS 是一款純前端表格控件，也是目前市面上唯一...

hizengzeng 2019-08-20 18:28 評論0 收藏0
純前端開發案例：用 SpreadJS 搭建信息系統軟件開發平臺

摘要：葡萄城的是一個基于技術的純控件，控件性能流暢，有類似的在線表格編輯器，適合非專業程序員設計報表模板，很符合平臺部分無編碼開發的理念。葡萄城控件產品對于項目的價值控件主要用于本項目中的報表設計，展示，打印等功能。 showImg(https://segmentfault.com/img/bVbalYk?w=1000&h=400); 華閩通達 - R 平臺應用所使用產品：SpreadJS ...

Heier 2019-08-22 17:08 評論0 收藏0
SpreadJS 在 Angular2 中支持哪些事件？

摘要：在上一篇文章中，我們學習了在中支持綁定的屬性，今天我們來介紹在中支持哪些事件。詳細的事件說明，請參考博客。版本即將發布，更多更好的功能盡在新版本中，敬請期待登錄官網，了解更多。 showImg(https://segmentfault.com/img/bVP1Wc?w=900&h=500);SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網格功能...

姘擱『 2019-08-20 17:47 評論0 收藏0