spreadjs使用
初始化表单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 movinginfos.sheet.getCell(infos.row, infos.col).backColor(undefined);
});//粘贴事件
spread.bind(GC.Spread.Sheets.Events.ClipboardPasted, function (sender, args) {if (sheet.getCell(args.cellRange.row, args.cellRange.col).locked()) {return;}console.log("ClipboardPasted");
});//值改变事件
spread.bind(GC.Spread.Sheets.Events.ValueChanged, function (sender, args) {
...
});//按钮点击事件
spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function(e, args) {
...
});//单元格点击事件
spread.bind(GC.Spread.Sheets.Events.CellClick, function(sender, args) {
...
});
spreadjs使用相关推荐
- 只需3分钟,就能轻松创建 一个SpreadJS的React项目
概述 SpreadJS 纯前端表格控件 V11.2(SP2) 已经全面支持了 React 的拓展.接下来我们看下如何利用3分钟快速创建一个 SpreadJS 的 React 项目. 1.新建React ...
- SpreadJS 类Excel表格控件 - V12 新特性详解
我们很高兴的宣布:纯前端类Excel表格控件 - SpreadJS 正式推出了 V12 新版本,此次的新版本中包含了诸多重量级的功能和来自客户的新需求,如对形状和富文本的支持,也有新增的图表类型,还有 ...
- SpreadJS 在 Angular2 中支持绑定哪些属性?
SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...
- js对文字批注_实现SpreadJS的自定制批注
原标题:实现SpreadJS的自定制批注 SpreadJS纯前端表格控件是基于HTML5的Java电子表格和网格功能控件,适用于.NET.Java和移动端等各平台在线编辑类Excel功能的表格程序开发 ...
- 纯前端表格控件SpreadJS V12.1 隆重登场,专注易用性,提升用户体验
一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...
- js固定表格行列_纯前端表格控件SpreadJS V14.0发布:组件化编辑器+数据透视表
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
- 葡萄城 SpreadJS 表格控件 V11 产品白皮书
一. 关于葡萄城 葡萄城成立于 1980 年,是全球领先的集开发工具.商业智能解决方案.管理系统设计工具于 一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务. 葡萄城是微软公 ...
- 纯前端开发案例:用 SpreadJS 搭建信息系统软件开发平台
华闽通达 - R 平台应用 所使用产品:SpreadJS 企业背景 福建华闽通达信息技术有限公司成立于 2007 年,是一家致力于工程项目管理.电子政务.电子商务及企业 ERP 实现的 SAAS.PA ...
- SpreadJS 在 Angular2 中支持哪些事件?
SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...
- Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(环境搭建)
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2 ...
最新文章
- 反射_Class对象功能_获取Field
- .NET 大会今日开幕 |这些白嫖福利不看肠子都悔青
- 十个模块_专栏 | ABAQUS Part模块的十个小技巧
- windbg调试HEAP
- java加载配置文件
- K8S_Google工作笔记0011---通过二进制方式_为APIServer生成自签证书
- 谷歌苹果齐降税,却没能拯救开发者的“钱包”!
- java向mysql插入数据乱码问题解决
- 矩阵论第二章总结:范数理论及应用(脑图)
- 魔兽地图服务器修改,魔兽地图编辑器的问题,怎么修改RPG
- ET框架---UnityWebRequestAsync学习笔记
- word论文排版插件_word论文排版自动编号设置
- 稳压二极管原理、参数、动态电阻特性
- 判断BIOS的启动模式和磁盘分区格式
- 微信小程序获取今日天气预报api 免费接口
- windows 系统netstat -ano查看机器端口占用情况
- linux系统无法启动提示give root password for maintenance的多种解决方法
- python+selenium之悠悠博客学习笔记
- ELK系列(四)、Logstash读取nginx日志写入ES中
- 转贴汪应果先生的“全球华人应该向大陆中国人学什么?”
热门文章
- 深入学习理解UNIX网络编程
- 点这里安装Alexa工具条
- 庆祝kkkbo出道!
- 摘录 | WAREZ无形帝国
- 获取JSON文本(复嵌对象)转换指定JSON数据并Ajax实现数据初始可视化【附上echarts地图官方数据形式json文件数据】
- 减速器的参数优化 毕业设计 matlab,matlab减速器计算机辅助设计系统+程序+CAD图纸+源程序...
- RainMeter学习1
- html css手册,CSS 参考手册
- 我什么都没有,只剩下坚持了!!!
- 【离散数学】图论 第七章(6) 图的结点着色和Welch Powell法、平面图着色、希伍德五色定理、四色定理