LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【JavaScript】spreadjs使用

admin
2023年5月25日 10:22 本文热度 540

初始化表单API

1.  const spreadNS = GC.Spread.Sheets;

2.  const SHEETS = new spreadNS.Workbook(this.refs['overseas']);

3.  // set sheet count

4.  // SHEETS.setSheetCount(1);

5.   

6.  const sheet = SHEETS.sheets[0];


设置默认属性

1.  const defaultStyle = new GC.Spread.Sheets.Style();

2.  // 设置默认背景色

3.  // @method1 defaultStyle.backColor = "LemonChiffon";

4.  // @method2 SHEETS.options.backColor = "#ccc";

5.  //defaultStyle.foreColor = "Red";

6.  //defaultStyle.formatter = "0.00";

7.  defaultStyle.font   = "bold normal 9px normal"

8.  defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;

9.  defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;

10.//defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);

11.//defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);

12.//defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);

13.//defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);

14.sheet.setDefaultStyle(defaultStyle, spreadNS.SheetArea.viewport);


表格的四个部分

1.  spreadNS.SheetArea.viewport

2.   

3.  // spreadNS.SheetArea include the following parts

4.  // colHeader: 1 ,

5.  //    corner: 0

6.  // rowHeader: 2

7.  //  viewport: 3

8.   

9.  // 改变表头的背景 Set the backcolor of second row header.

10.sheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");


其他配置

1.  // 表格下边的tab的颜色

2.  sheet.options.sheetTabColor = "red";

3.   

4.  // 表格只读

5.  sheet.options.isProtected = true

6.   

7.  // 允许cell内容移除

8.  activeSheet.options.allowCellOverflow = true;

9.   

10.// 第一列不可见

11.sheet.setColumnVisible(0, false)

12.

13.// 添加tips

14.sheet.comments.add(4, 4, "不要修改!");

15.

16.// 禁止用户编辑公式

17.spread.options.allowUserEditFormula = false;

18.

19.// 不显示格子的边

20.sheet.options.gridline = {

21.    color:"red",

22.    showVerticalGridline: true,

23.    showHorizontalGridline: false

24.};

25.

26.// 不显示表头

27.activeSheet.options.colHeaderVisible = false;

28.activeSheet.options.rowHeaderVisible = false;


减少重绘

1.  spread.reset() // 清空数据

2.  spread.suspendPaint();  //suspendPaint 暂停重绘  先这样 很多操作之后 resumePaint

3.  spread.addSheet(0);

4.  spread.fromJSON(json);  // json data

5.  spread.resumePaint();   // 调用resumePaint 重新激活Spread重绘


excel 运算符

1.  引用运算符 含义(示例)

2.  :(冒号) 区域运算符,产生对包括在两个引用之间的所有单元格的引用 (B5:B15)

3.  ,(逗号) 联合运算符,将多个引用合并为一个引用 (SUM(B5:B15,D5:D15))

4.  (空格) 交叉运算符产生对两个引用共有的单元格的引用。(B7:D7 C6:C8)


设置单元格属性

1.        

2.  sheet.getCell(2, 1).

3.  text("huahua").             // 设置文字

4.  backColor("rgba(1,1,1,.3)") //设置背景色


公式

1.  // 随机数

2.   sheet.setFormula(1, 1, "RandBetween(45,85)");

3.   

4.  // 求和

5.  sheet.setFormula(1, 1, "SUM(A1,B1)"); //A1B1之和

6.  sheet.setFormula(1, 1, "SUM(A1:H1)"); //A1H1之和

7.   

8.  // 条件

9.  sheet.setFormula(4, 1, "IF(A1>10, A1*2, A1*3)");


开启R1C1 引用

1.  // open r1c1 reference

2.  SHEETS.options.referenceStyle = 1;


基本操作

1.  // 添加行/

2.  sheet.addRows(1, 1);    sheet.addColumns(1, 1);

3.   

4.  // 设置背景图片

5.  activeSheet.getCell(1, 1).backgroundImage("Image file path name");


设置row和column的背景色

1.  /**

2.  * @name set the bgColor of column

3.  *

4.  * @type1

5.  * sheet.getRange(-1, 1, -1, 1).backColor("lightYellow").width(330);

6.  *

7.  * @name set the bgColor of row

8.  *

9.  * @type1

10.* sheet.getRange(0, -1, 1, -1).backColor("lightYellow").height(44)

11.*

12.* @type2

13.* const rowStyle1 = new spreadNS.Style();

14.* rowStyle1.backColor = "#bdcde3";

15.* sheet.setStyle(0, -1, rowStyle1, spreadNS.SheetArea.viewport);

16.*/


events

1.  // 获取点击的cell和所在的sheet

2.  SHEETS.bind(spreadNS.Events.EnterCell, function (event, data) {

3.      console.log(data.col)

4.      console.log(data.row)

5.      console.log(data)

6.      var activeSheet = data.sheet;

7.      activeSheet.startEdit(true);

8.  });

9.   

10.// 离开cell事件

11.sheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (event, infos) {

12.    //Reset the backcolor of cell before moving

13.    infos.sheet.getCell(infos.row, infos.col).backColor(undefined);

14.});

15.

16.//粘贴事件

17.spread.bind(GC.Spread.Sheets.Events.ClipboardPasted, function (sender, args) {

18.    if (sheet.getCell(args.cellRange.row, args.cellRange.col).locked()) {

19.       return;

20.    }

21.    console.log("ClipboardPasted");

22.});

23.

24.//值改变事件

25.spread.bind(GC.Spread.Sheets.Events.ValueChanged, function (sender, args) {

26....

27.});

28.

29.//按钮点击事件

30.spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function(e, args) {

31....

32.});

33.

34.//单元格点击事件

35.spread.bind(GC.Spread.Sheets.Events.CellClick, function(sender, args) {

36....

37.});



该文章在 2023/5/25 10:22:56 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved