格,又称为表,既是一种可视化交流的模式,又是一种组织整理数据的手段。通过将“表格”嵌入企业信息化系统,可帮助业务人员更快、更准确地处理数据,大幅提高运营管理效率。
企业信息化系统大致可以分为以下三类:
通过将“表格”模块嵌入上述信息化系统,可满足对 Excel文档的操作和系统兼容性要求,实现高并发的数据处理和填报,以及灵活多变的报表格式设计。葡萄城的 SpreadJS 纯前端表格控件,便可有效应对这些需求。
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、明源云、远光软件等知名企业青睐,被中国软件行业协会认定为“中国优秀软件产品”。
为了详细阐述企业表格技术的具体应用实践,本期葡萄城公开课,我们邀请到了上海佳软的技术负责人——刘立兼先生,从实际项目出发,演示如何改造SpreadJS表格编辑器以满足业务个性化定制需要。
在线表格编辑器是 SpreadJS 的扩展插件,可直接在 Angular、 React、 Vue 等前端框架中调用,内置开放的 API 和类 Excel 的 UI 设计元素(如工具面板),可实现高效的模板设计、在线编辑和数据绑定,为最终用户带来高度类似 Excel 的使用体验。在线表格编辑器不包含在任何控件或套包内,需要在获得 SpreadJS 的授权后购买使用。
更细腻的功能颗粒度
做过sdk的都知道颗粒度的问题,使用SpreadJS 表格编辑器,可以享受两种颗粒度的api:编辑器提供的应用层面的api和SpreadJS提供的实现层面的api。当需要二次开发的时候,这两种api交替使用可以大大简化开发的过程。
有效降低开发成本
SpreadJS 的在线表格编辑器直接提供了实现Excel功能的源码、可视化操作界面和API接口,可帮助开发人员减轻代码量,降低开发成本。
最好的技术用例
SpreadJS官网的API文档更倾向于讲解SpreadJS的函数使用,而表格编辑器源码则提供了从上往下分解的代码用例,其完全按照Excel功能进行分类,对于实现类Excel电子表格的系统开发来说,这是最好的用例了。
最佳的价值输出
对于开发者来说,直接拿到SpreadJS的源码往往不知道能做到什么样子,但是拿到了在线表格编辑器的源码,用户就可以了一目了然地看到SpreadJS强大的类 Excel 数据处理和计算能力,从而更加认可SpreadJS的价值。
1. 灵活的应用方式
SpreadJS 在线表格编辑器采用了组件化的设计架构,以 Dom 作为容器,其目标场景定位于可嵌入各类前端页面,并通过扩展插件的形式与 SpreadJS 进行交互。
2. 更易嵌入、移植
SpreadJS 在线表格编辑器不依赖于任何外部类库,有自己的命名空间,以闭包方式,避免 CSS 样式冲突,并可直接在 Angular、Vue、React 等前端 JS 框架中调用。
3. 体积更小,秒级加载
SpreadJS 在线表格编辑器的体积很小,不到 4 MB,且加载速度很快,首次加载仅需 1 ~ 2 秒(以上数据均为测试数据,仅供参考)。
4. 定制更容易,交互更丰富
SpreadJS 在线表格编辑器采用了声明式语法,代替了 HTML 源代码,二次封装更容易,定制方式更灵活。
1. 顶部工具栏样式和事件绑定
如下图所示, 在编辑器 index/index.html 这个文件的container里面添加自定义的样式:
并对添加的按钮进行事件的绑定, 这个绑定是在initSpread.js的initEvent方法中进行的,编辑器初始化后会调用此方法。
2. 工具栏面板
如果要新增功能图标,则需要在ribbon/ribbon.html里面添加一栏,并定义相应的点击事件。
3. 命令改造:anyscLicenser 事件
调用SpreadJS的功能有两种方法,一种是通过SpreadJS提供的方法,还有一种则是通过命令,表格编辑器对于SpreadJS功能的调用,大部分采取了命令的方式,如果你想对现有的编辑器功能进行改造,那么你需要改造对SpreadJS方法的调用,也需要改造对命令的使用。
改造对SpreadJS方法的调用是没什么问题的,只需要根据官方的文档和用例按需改就行了,但是改造对命令的使用则需要通过监听事件来实现。如下图,我们需要在SpreadJS的命令管理器中,把anyscLicenser 事件和自定义的处理方法进行关联,使得SpreadJS一旦监听到anyscLicenser 事件,就自动执行对应处理方法。在处理方法中,我们可以去增加另外的处理,从而实现对命令的改造。
这个事件监听可以添加到自定义的文件里面,但是要保证表格编辑器完全加载好了。
4. 定制打印功能:
根据工具栏改造的方法新增入口图标,将打印页面通过事件与图标进行绑定,点击弹出,设置页面上的设置绑定js对象的属性。当点击打印时,图上代码通过js对象的属性对SpreadJS的PrintInfo对象进行设置,然后调用SpreadJS的print方法进行实际打印。
打印页面
页边距
工作表
5. 增加阅读模式:
前端:初始化的时候执行一下 rewriteBase(),绑定ActiveSheetChanged事件, 将实时的selections赋值给GlobalInfo.selections,并重新repaint。
后端:添加开关配置, 用于持久化阅读模式的开关。
6. 格式刷功能:
SpreadJS 的 Copyto是一个很方便的方法,可以在同一个工作表中复制一个范围的样式、值、公式、注释等,要想使用这个功能,只需定义一个全局变量isFormatPainting=false,当点击格式刷按钮的时候isFormatPainting设置为true,并监听GC.Spread.Sheets.Events.SelectionChanged事件,在事件内部回调中判断isFormatPainting的值为true的时候就将当前选中的区域做一下格式刷逻辑即可。
7. 高级搜索功能
使用葡萄城的另一款服务端表格组件GCExcel的后端搜索实现快速搜索功能,通过设计后端查找的页面,在SpreadJS编辑器本身的查找的框上面添加:
以上就是个性化改造SpreadJS在线表格编辑器的主要内容,对于有高效的模板设计、在线编辑和数据绑定需求,以及想要开发类似 Excel 功能和使用体验系统的同学可以前往 SpreadJS 在线表格编辑器官网试用体验。
tml源码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问数据库</title>
<style>
#name{width: 180px;
}#msg{width: 180px;height: 180px;font-size: 20px;
}#save{width: 80px;line-height: 30px;background-color: cornflowerblue;border: 0px;
}</style>
</head>
<body>
<h1>使用数据库实现留言簿</h1>
<label for="name">姓名:</label>
<input id="name" type="text" placeholder="请输入姓名:"/><br/>
<label for="msg">留言:</label>
<textarea id="msg" placeholder="请输入留言信息" ></textarea>
<br/>
<button id="save" >保存</button>
<hr />
<table border="1" id="datatable" cellspacing="0" cellpadding="0"></table>
<p id="msgs"></p>
<script type="text/javascript" src="js/db.js"></script>
</body>
</html>db.js源码:window.onload=init;
var datatable=null;
//创建数据库,获取数据库访问对象。var db=openDatabase('mydb','','mydatabase',102400);
//初始化function init() {
datatable=document.querySelector("#datatable");
同浏览器对网页默认的组件解析样式不一致,而且不够美观,网页样式开发需要大量时间,今天介绍一款优雅的 CSS 框架。
Pico.css 是一个简单轻量化的 CSS UI 框架,最大的特点是样式都基于 HMTL 原始的标签名和内置的属性,少用甚至是不用 class 来定义样式,写出来的代码语义清晰,可维护性强,能够帮助开发者构建自己的 UI 系统,也可以直接用于快速的小型项目中。
Pico-css 官网
截止发文日期,Pico.css 在 Github 上已经有高达 3898 个 Star。
引入 Pico.css 最简单直接的方式就是下载后直接引入一个样式文件:
Pico-css cdn 引入
当然也可以通过 npm 安装:
Pico-css npm 安装
然后就可以编写 html 代码了。
想要做一个输入框和提交表单,往往需要这样的代码:
常规实现 form 表单代码
而使用 Pico.css,只需要:
Pico-css 实现表单
Pico.css 内置了很多基础的组件,包括常用表单控件、表格、弹窗、导航菜单、卡片等,代码非常简洁,比如实现一个美观的进度条,只需要这点代码:
Pico-css 实现进度条
Pico.css 内置了浅色和深色两套主题,使用方法非常简单,给父级元素添加属性data-theme。
切换主题
官网还有很多代码例子,比如编写一个美观大气的登录界面,html 代码十分简洁,仿佛回到了刚刚开始学习 html 语法的时代。
登录界面
通过 CSS 文件的源码,可以看到样式的选择器大多通过 HTML 元素标签名、内置的属性以及自定义属性来命中,这样就规避了常规的只使用 class 来区分的“命名地狱”,是一种非常好的网页编程思路。
Pico-css 源码
面向对纯粹 HTML 有极致追求的开发者,Pico.css 还提供了 classless 版本,这个版本将一个 class 都没有,完全使用元素标签名和属性编写网页。
在项目中使用 Pico.css 源自于一次快速的营销页需求,需要做简单的几个带有输入交互的页面,使用 bootstrap 这样庞大的框架显然有点笨重了,如果使用当前流行的能够按需引入的 Vue UI 组件库,又免不了要用 Vue.js 来工程化。只是做几个简单的页面,没有必要用中大型项目的标配,考虑到目前市面上大多数 UI 框架都过度封装,堆叠了很多包含各种语义的 class 名,不仅会让页面加载变慢,而且会导致更长的样式计算时间,最终还是找到了适合这样场景的 Pico.css。
css 样式的写法很自由,目前前端开发存在一个趋势,为了做精美的界面,需要花费大量的时间来写样式,为了样式可以复用,绞尽脑汁给 class 起名字,甚至网上还有各种 class 命名规范,这可能导致了大量的样式被覆盖,很多时候 class 属性的名称,甚至比样式的代码还要多,极难维护。
Pico.css 的出现给这样的开发现状提供了一种新思路,不仅可以直接用在实际项目中,也能够作为构建自己的 UI 库的基础样式。
Pico.css 是一个免费开源的项目,源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用。
关注我,持续分享高质量的免费开源、免费商用的资源。
↓↓点击查看本次分享的网址。
Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面|那些免费的砖
*请认真填写需求信息,我们会在24小时内与您取得联系。