【JavaScript】spreadjs使用
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
初始化表单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)"); //A1和B1之和 6. sheet.setFormula(1, 1, "SUM(A1:H1)"); //A1到H1之和 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 编辑过 |
关键字查询
相关文章
正在查询... |