关于葡萄城开发技术:用Echarts实现前端表格引用从属关系可视化

在金融行业,咱们常常会有审计审查的需要,对某个计算结果进行审查,然而这个计算结果可能依赖多个单元格,而且会有会有多级依赖的状况,如果让咱们的从业人员靠眼睛找,工作量微小,而且准确性存疑,基本上死路一条,因而让整个审查过程可视化,火烧眉毛,当初咱们利用纯前端表格和Echarts将审计审查过程可视化 一.首先咱们先理解一下前端表格或Excel中援用和从属关系: 1.在单元格B1中设置公式 =SUM(A1)。 单元格A1是单元格B1的援用单元格(援用关系) 2.在单元格B1中设置公式 =SUM(A1)。 单元格B1是单元格A1的隶属单元格(从属关系) 二.接下来咱们看一下最终实现成果: 1.援用关系 2.从属关系 三.本次咱们用的是Echarts的树图将援用和从属关系可视化,对于Echarts上手,大家去Echarts官网有残缺上手教程,Echarts社区有很多开发者做的许多乏味又实用的demo,这里咱们用的是树图 四.接下来咱们要用纯前端表格控件的获取援用和从属关系的api将某个单元格的援用和从属关系顺藤摸瓜,刨根问题,刨到“祖坟”上,将这些关系,结构成Echarts树图的data构造,废话不说,间接上外围代码 // 递归构建追踪树 buildNodeTreeAndPaint = (spreadSource, trackCellInfo) => { let info = this.getCellInfo(trackCellInfo); let sheetSource = spreadSource.getSheetFromName(info.sheetName); // 创立跟节点 let rootNode = this.creatNode(info.row, info.col, sheetSource, 0, ""); let name = rootNode.sheetName + "*" + rootNode.row + "*" + rootNode.col + "*" + Math.random().toString(); let precedentsRootNode = ''; let dependentsRootNode = ''; if (this.state.trackType === "Precedents" || this.state.trackType === "Both") { this.getNodeChild(rootNode, sheetSource, "Precedents") debugger; console.log(rootNode) if (this.state.trackType === "Both") { let rootNodeChildren = JSON.parse(JSON.stringify(rootNode.children)); rootNode.children = []; precedentsRootNode = JSON.parse(JSON.stringify(rootNode)); precedentsRootNode.children.push({ name: "Precedents", value: "Precedents", children: rootNodeChildren }) this.setState({ precedentsRootNode: JSON.parse(JSON.stringify(precedentsRootNode)), }) } } if (this.state.trackType === "Dependents" || this.state.trackType === "Both") { this.getNodeChild(rootNode, sheetSource, "Dependents") console.log(rootNode) if (this.state.trackType === "Both") { let deepInfo = [1]; let rootNodeChildren = JSON.parse(JSON.stringify(rootNode.children)); rootNode.children = []; dependentsRootNode = JSON.parse(JSON.stringify(rootNode)); dependentsRootNode.children.push({ name: "Dependents", value: "Dependents", children: rootNodeChildren }) this.setState({ dependentsRootNode: JSON.parse(JSON.stringify(dependentsRootNode)), }) } } if (this.state.trackType === "Both") { precedentsRootNode.children = precedentsRootNode.children.concat(dependentsRootNode.children); // let bothRootNode = precedentsRootNode.children[0].children.concat(dependentsRootNode.children[0].children) this.setState({ rootNode1: JSON.parse(JSON.stringify(precedentsRootNode)), }) } else { this.setState({ rootNode1: JSON.parse(JSON.stringify(rootNode)), }) } } creatNode = (row, col, sheet, deep, trackType) => { let node = { value: sheet.getValue(row, col), position: sheet.name() + "!" + GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1)), deep: deep, name: `${sheet.name()}!${GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1))}\nvalue:${sheet.getValue(row, col)}`, sheetName: sheet.name(), row: row, col: col, trackType: trackType }; return node; } getNodeChild = (rootNode, sheet, trackType) => { let childNodeArray = []; let children = []; let row = rootNode.row, col = rootNode.col, deep = rootNode.deep; if (trackType == "Precedents") { children = sheet.getPrecedents(row, col); } else { children = sheet.getDependents(row, col); } // let self = this; if (children.length >= 1) { children.forEach((node) => { let row = node.row, col = node.col, rowCount = node.rowCount, colCount = node.colCount, _sheet = sheet.parent.getSheetFromName(node.sheetName); if (rowCount > 1 || colCount > 1) { for (let r = row; r < row + rowCount; r++) { for (let c = col; c < col + colCount; c++) { let newNode = this.creatNode(r, c, _sheet, deep + 1, trackType) // if (deep < self.maxDeep) { this.getNodeChild(newNode, _sheet, trackType); // } childNodeArray.push(newNode); } } } else { let newNode = this.creatNode(row, col, _sheet, deep + 1, trackType) // if (deep < self.maxDeep) { this.getNodeChild(newNode, _sheet, trackType); // } childNodeArray.push(newNode); } }); } rootNode.children = childNodeArray; }五.将结构好的援用和隶属树rootNode在Echarts中渲染 ...

January 4, 2023 · 3 min · jiezi

关于葡萄城开发技术:Vue-SpreadJS-实现高性能数据展示与分析

Vue + SpreadJS 实现高性能数据展现与剖析 在前端开发畛域,表格始终都是一个高频应用的组件,尤其是在中后盾和数据分析场景下。但当一屏展现数据超过1000条数据记录时,会呈现浏览器卡顿等问题,重大影响客户体验。为解决这些性能问题,不少组件也提出了相干的解决方案,以ElementPlus为例,提出了虚拟化表格的概念来晦涩的展现更多的数据,但该性能目前仍在测试中,投入生产环境可能会有肯定的危险,因而本文不做更多的介绍,大家有趣味能够参考虚拟化表格。 本文介绍一款纯前端的表格控件SpreadJS,具备高度类Excel操作行为及高性能的数据展现解决性能,在类Excel业务需要实现及大数据展现方面有较好的应用体验。相干的性能体验能够参考:性能演示利用。同时,官网具备大量的学习材料及成熟的技术配套服务,只有把握根底的前端开发技能,就能够轻松上手SpreadJS。本文以Vue3框架为例,简要介绍如何应用SpreadJS来做数据分析及可视化展现。SpreadJS如何与Vue3框架继承可参考: Vue3构建电子表格; Vue3集成SpreadJS产品文档。 产品集成实现之后,接下来咱们一起来理解SpreadJS中对于数据展现及可视化剖析的相干性能点。 (1)数据透视表 SpreadJS作为类Excel表格控件,具备与Excel高度一致的性能,而在Excel中,用来做数据分析的一个要害性能就是数据透视表。同理,在SpreadJS中也能够应用透视表来做数据分析。对于透视表的概念,如果不了解可做参考: 创立数据透视表以剖析工作表数据; 手把手教你玩转 Excel 数据透视表 SpreadJS对透视表提供了UI操作与API,咱们能够依据理论需要抉择应用UI还是API。UI操作上与Excel操作透视表统一,如下所示,咱们能够导入一张蕴含透视数据源的excel文件,之后基于该数据源,抉择行列剖析维度,生成指标透视表: 怎么样,是不是操作非常简略,秩序简略几步,就能够将excel的透视表性能迁徙到Web端。作为前端控件,SpreadJS也提供了API来反对透视表展现,具体的API阐明可参考学习指南-透视表。 (2)集算表 集算表是SpreadJS V15.0之后提出的一个新的性能点,该性能可依据申请接口返回数据,疾速生成结构化视图展现。反对数据验证,条件格局等常见Excel操作,并且多数据源之间反对连贯,相似于数据库表之间的外联关系。集算表UI操作如下: 集算表-主动同步 视频中的所有接口由Postman模仿生成,理论我的项目中,可依据本人的业务状况填写接口。作为前端控件,SpreadJS不会限度接口返回数据起源,能够来自关系型数据库MySQL,SQL Server,也能够来自Redis、Mongodb等其它非关系型数据库,当然,也能够来自OA,CRM等其它业务零碎。 数据达到前端之后,也可对有关联关系的两张表做连贯展现剖析,具体操作如下所示: 动图中,演示的两张表对应的数据申请接口别离是: 主表: https://demodata.grapecity.co... 客户信息表:https://demodata.grapecity.co... 如果想进一步理解集算表API实现,可参考学习指南-集算表。通过字段列关联生成的视图,如果满足透视表数据源要求,可进一步抉择插入透视表进一步做汇总,统计等数据分析。

January 4, 2023 · 1 min · jiezi

关于葡萄城开发技术:数据赋能的未来看向嵌入式BI

数据分析能力越来越成为消费者和企业的必备品应用程序,复杂程度各不相同,从简略地一个网页或门户上托管一个可视化或仪表板,到在一个云服务上实现数据摸索、建模、报告和可视化创立的应用程序。BI的实现形式越来越多,无论规模大小,在任何以数据为核心的企业中,BI软件都已成为中流砥柱。 每家公司都在成为一家数据公司,利用数据和剖析的能力将行业领导者与其余公司辨别开来,越来越多的客户冀望在他们日常应用的应用程序、产品和服务中提供可操作的数据分析服务,以取得弱小的洞察力。但从头开始构建这些性能是一项艰巨的工作,更好的解决方案是:将行业当先的剖析平台嵌入到已有的外围产品中,这就是嵌入式剖析,是商业智能畛域最热门的趋势之一。 咱们一起探探嵌入式BI的前世今生 嵌入式 Bl 市场并不陈腐,只有有 Bl 软件,它就始终存在。自 1990 年代中期以来,Bl 嵌入应用程序的形式产生了巨大变化,过后 Crystal Reports 是事实上的报告工具,包含 Microsoft 在内的每个软件供应商都将其捆绑到其商业软件中。 嵌入式 Bl 性能的程度曾经从 1990 年代的动态报告倒退到 2000 年代的交互式报告和仪表板,再到明天的自助服务、预测和混合剖析。在 1990 年代,Bl 工具具备本人的外观和感觉,并且是大多数利用程序包中的一个独特模块。到 2000 年代,Bl 工具能够配置为采纳主机应用程序的外观。明天,开发人员能够创立齐全自定义的前端或针对 Bl 产品的应用服务器运行的应用程序。 此外,Bl 工具当初能够拜访比关系数据库更宽泛的数据,关系数据库是 1990 年代的次要数据源,在 2000 年代,Bl 工具能够惯例查问 OLAP 和 XML 源,而现在许多工具反对一系列云应用程序,例如 Salesforce 或 Zendesk,以及大数据源,包含 Hadoop、NoSQL、服务器日志、事件流、搜寻索引和云文件系统,例如 Amazon S3 和 Google File System 等。 Bl 软件曾经从桌面转移到了网络,当初又转移到了云端,组织能够按月(或有时按小时)租用软件。 Web 和反对云的 Bl 应用程序能够在不同的服务器上运行,因而不与主机应用程序共享代码或库,这打消了版本控制方面的思考。 借助云,BI 产品能够部署在多租户的环境中运行,为每个租户及其特定数据提供配置、治理和平安。 云还使 Bl 供应商有机会将他们的产品作为软件即服务 (Saas) 或平台即服务 (PaaS) 应用程序提供,同时提供其余云劣势,包含主动软件更新、最新的安全性、弹性可扩展性和可预测的许可。 ...

January 4, 2023 · 1 min · jiezi

关于葡萄城开发技术:手把手教你玩转-Excel-数据透视表

1.  什么是数据透视表 数据透视表是一种能够疾速汇总、剖析大量数据表格的交互式剖析工具。应用数据透视表能够依照数据表格的不同字段从多个角度进行透视,并建设穿插表格,用以查看数据表格不同层面的汇总信息、剖析后果以及摘要数据。 应用数据透视表能够深入分析数值数据,以帮忙用户发现要害数据,并做出无关企业中要害数据决策。 2.  为什么应用透视表 简略、高效、灵便、出错率低。 3.   什么时候用数据透视表 找出同类数据在不同期间的某种特定关系以简洁敌对的形式,查看大量的表格数据对数值数据疾速分类汇总,按分类和子类查看数据信息建设穿插表格,将行挪动到列或将列挪动到行,以查看数据源的不同汇总疾速的计算数值数据的汇总信息、差别、个体占总体的百分比信息等数据源常常变动4.   数据透视表的应用形式 4-1 数据源 用于生成透视表的原始数据成为数据源。 数据源须要们组肯定的规定能力成为一个非法的数据源,具体规定如下: 每列数据的第一行是该列的题目数据源不能蕴含空行和空列数据源不能蕴含空单元格数据源中不能蕴含合并单元格数据源中不能蕴含同类字段 上图中,方框圈出的区域都属于不非法的数据区域。其中,绿色区域为合并单元格,黄色为空白单元格,蓝色为同类字段,均不合乎对规范数据源的要求。 4-2 透视表刷新 透视表刷新粉两种形式,手动刷新和主动刷新。 手动刷新下,也分为两种状况,别离是数据源区域未扭转及数据源区域产生扭转。如果只是单元格数值发生变化,能够选中透视表区域右键刷新或者在透视表剖析面板中点击刷新。而如果对数据源进行了删除或新增,则须要手动的去更改数据源。 主动刷新能够在数据透视表选项面板中抉择关上文件时刷新数据或应用VBA主动刷新数据表。 5.   切片器 透视表默认提供了筛选、排序等性能,但在须要多维度筛选剖析数据或者多个透视表之间共享筛选条件时,默认的筛选按钮操作起来非常繁琐,并且不够直观,在这种状况下,能够应用切片器来达到数据筛选及共享条件成果。 切片器是Office 2013以上版本才有的性能,次要作用就是简化数据筛选,可利用在超级表或者透视表上。给文件中一般的区域套用表格款式之后,该区域会变成超级表,在此抉择该区域,就能够插入切片器了,具体操作如下: 切片器同样也能够利用于透视表,在一个Excel文件中,基于雷同的数据源,能够生成多个透视表,这些透视表之间会共享数据透视缓存。此时基于某个透视表创立的切片器,抉择报表连贯,即可与其它透视表共用同一个切片器,实现筛选条件的同步,具体操作如下: 6 透视表的利用场景 6-1 教学管理系统 生成课表是教学管理系统中的一个高频需要点,应用透视表能够非常快捷地生成每个班级的课程表,具体操作如下: 除了制作每个班级的课程表之外,简略的扭转透视维度,又能够生成每位老师的课程表: 上边生成的透视表能够让老师们直观的看到本人每天的课程数量,也不便管理者更加直观地理解员工的工作量。 6-2 人事管理系统 人事管理系统中,高频的需要点就是对人员的分类汇总。例如,咱们须要对公司所有员工依照性别进行分类,就能够基于人员信息生成透视表,具体操作如下: 该透视表,行维度为部门信息,列维度为性别,最终统计字段为员工姓名。只需简略几步,即可直观的看到人员性别的统计数据,再也不须要咱们去做筛选后再统计数据了。首次之外,透视表能够应答复杂多变的统计条件,某一天,你的领导忽然想晓得公司人员的学历占比,此时你只须要 微微调节维度信息,就能够疾速交工,又能够高兴的摸鱼了。基于透视表,能够生成更加直观炫酷的透视表,是时候在领导背后秀一波了。 除此之外,透视表也可用于区间数据汇总剖析,例如,咱们能够分年龄段统计人数。并且统计后果黏贴为一般区域,基于该区域生成一张有比照成果的图表,一起来看看吧~ 6-3 在销售中的利用 在销售管理系统中,一个高频的需要点就是依据销售订单,疾速生成月报、季度报告、年报等等。应用透视表,只须要简略几步,即可实现报告的生成,再也不须要苦哈哈的手动去统计数据,之后再制作报表了。首先,咱们基于销售历史数据生成一张透视表,并依照销售日期等维度制作一张根底透视表。 接下来,咱们对日期创立组,实例中以月维单位,理论我的项目中,能够依据理论需要,依照季度等其它单位创立组。 透视表在理论业务中利用宽泛,也可利用于报表的合并剖析及拆分。 拓展浏览React + Springboot + Quartz,从0实现Excel报表自动化 电子表格也能做购物车?简略三步就能实现 应用纯前端类Excel表格控件SpreadJS构建企业现金流量表

December 26, 2022 · 1 min · jiezi

关于葡萄城开发技术:如何写成高性能的代码三巧用稀疏矩阵节省内存占用

稠密矩阵的概念一个m×n的矩阵是一个由m行n列元素排列成的矩形阵列。矩阵里的元素能够是数字、符号及其他的类型的元素。 一般来说,在矩阵中,若数值为0的元素数目远远多于非0元素的数目,并且非0元素散布没有法则时,则称该矩阵为稠密矩阵;与之相同,若非0元素数目占大多数时,则称该矩阵为浓密矩阵。定义非零元素的总数比上矩阵所有元素的总数为矩阵的浓密度。,上面的矩阵就是一个典型的稠密矩阵。 咱们日常应用的电子表格也是一个典型的稠密矩阵场景,电子表格(SpreadJS, Excel,Google Sheet等等),整体看起来像一个table表格。, 其中列名称顺次为A, B, C … …, 行名称顺次为1, 2, 3 … … 举例一个比拟极其的场景,在A1和ZZ2000单元格别离赋值,这样咱们就须要一个2000行,26*26+26=702列的矩阵来示意它,这个矩阵是一个显著的稠密矩阵。 稠密矩阵的存储形式及优化间接存储为二维矩阵间接应用二维矩阵会简略间接地存储整个电子表格,这样你不用每次都创立或删除一段内存。但这是一种十分暴力的存储值的办法,这种形式下会耗费大量内容来存储毫无内容的单元格。简略的来看一下它的复杂度: 占用空间:O(N2)插入数据:须要毁坏矩阵.删除数据:须要毁坏矩阵.搜寻数据:O(N2)拜访数据:O(1)N是假如行和列具备雷同长度并造成正方形矩阵的行/列数。 通过键值对(Map, Dictionary)优化在这种办法中,只有在单元格有值时,咱们才将单元格的值和地位存储在一起,应用HashMap或者Dictionary这些数据结构能够很容易的做到.。 下图咱们能够看到,键值对中别离存储了单元格地位和单元格值。 来看一下它的复杂度: 空间:O(N)插入:O(1)删除:O(1)搜寻:O(N)拜访:O(1)N为所记录的条目数。 通过稠密矩阵存储形式优化在稠密矩阵中,咱们能够应用三个不同的数组来存储行索引、列偏移、和其中的值,而不是间接在二维矩阵中存储值。以这种形式按列压缩稠密矩阵 存储的三个数组: 值 =>单元格中的值。行索引=>单元格的行索引。列偏移=>这里每个索引都代表列,并且该数组将行开始的索引值存储在 Row 数组中。 稠密矩阵具体的插入,、删除,、搜寻,、拜访的代码,大家能够本人来搜寻,这方面的材料网上有很多。,这里不一一列举。 和下面一样,来看看这种形式的复杂度: 空间:O(N)插入:O(N)删除:O(N)搜寻:O(N)拜访:O(1)相较于传统的数组存储或是键值对存储,稠密矩阵存储构建了基于行索引为 Key 的数据字典,在涣散布局的表格数据中,稠密矩阵只会对非空数据进行存储,而不须要对空数据开拓额定的内存空间。应用这种非凡的存储策略,使得数据片段化变得容易,能够随时框取整个数据层中的一片数据,进行序列化或反序列化。如果咱们在我的项目开发中须要存储相似构造的数据,稠密矩阵这种存储形式,无论从工夫还是空间上都能大大的提成性能。 在葡萄城的 SpreadJS 和 GcExcel 表格组件中,也奇妙的应用了稠密矩阵这一个性,能够随时替换或复原整个存储构造中的任何一个级别的节点,以扭转援用的形式更高效的地解决表格数据回滚和复原问题,而这一点也为葡萄城表格组件反对多人在线协同打下了一个良好的根底。 因为底层采纳了稠密矩阵来优化存储,SpreadJS在前端页面中,实现了100W级别数据秒级响应的能力: 纯前端百万级数据申请、加载、筛选和排序 点击此处能够在线体验:性能演示 同时,联合SpreadJS中应用的Canvas 绘制模型,双缓存画布渲染等专利技术,让SpreadJS的前端性能相比于同类产品遥遥领先。 更多纯前端表格在线demo示例 :https://demo.grapecity.com.cn... 纯前端表格利用场景:https://www.grapecity.com.cn/... 挪动端示例(可扫码体验):http://demo.grapecity.com.cn/...

November 1, 2022 · 1 min · jiezi

关于葡萄城开发技术:数据可视化大屏酷炫秘籍之前端开发者自己动手

数据可视化大屏酷炫秘籍之前端开发者本人入手数据可视化大屏的酷炫成果置信大家都曾经见识到了常常是这样的: 或者是这样的 又或者是这样的 如此酷炫的大屏成果,要想齐全还原首先离不开以下步骤: 设计师准确到像素的设计稿有了图纸稿原型,那就须要动效了,没有动效的可视化大屏,等于没有灵魂,那么动效可能交给美工或设计师人员帮咱们制作一些GIF动画,或者小视频用于展现。然而须要将数据与模仿场景绑定,比方模仿机房,模仿3D整机,不仅须要展现动效和图形成果,还须要绑定理论的业务数据,那么这一步就得咱们前端开发本人入手了。置信大家都曾为Echarts的图表或地图开发者模式给感动过,如果可能把这些动效间接为咱们所用,展现到可视化大屏中,升职加薪不是梦,领导夸拍案叫绝。 那咱们接下来就以 Wyn 商业智能可视化大屏设计工具为示例,演示如何进行插件开发,将喜爱的成果引入到可视化大屏中,接下来为大家介绍插件开发中的一些根底性能,以及demo示例。 Demo下载地址: https://gcdn.grapecity.com.cn... 一、visual.json 文件介绍 name:插件名称 externalJs:须要引入的内部js,能够通过{{参数名}}获取配置中的参数 Configuration:扩大参数 配置字段内容获取 二、webpack.config.js 设置内部援用包外面的js对象名称,能够在 visual.ts 文件中援用 内部扩大js插件援用形式: 三、package.json Version:设置插件版本号 四、assets 能够在外面定义一些图片资源,应用时返回base64文件,用资源图片时,须要在visual.json 中定义名称映射 获取图片内容: 五、capabilities.json 属性设置,数据字段配置 1.dataBinding 数据绑定 (1)dataRoles name: 属性名称 displayNameKey: 显示名称 kind: grouping:用于度量字段的分类或分组。 value:数值数据。 groupingOrValue:可用作度量也能够用作分组。 options:format 格式化,displayUnit 数据单位,enum 自定义下拉框,(应用形式前面具体介绍) (2)dataViewMappings,conditions 设置数据绑定的最大,最小数量。 conditions 组合条件,{},{}属于或者关系,上面示例中能够了解为: ① numeric 没有绑定字段,category 绑定数量无限度。 ② numeric 若绑定数据,则category 最多只能绑定一个字段。 ...

October 28, 2022 · 1 min · jiezi

关于葡萄城开发技术:项目实战在线报价采购系统React-SpreadJSEcharts

小伙伴们对洽购零碎必定不生疏,小到出差路费、部门物资洽购;大到生产打算、原料老本预估都会波及到该零碎。 管理人员能够通过洽购零碎缩小治理老本,说是治理利器毫不过分,对于洽购的效率晋升也有极大帮忙。 然而对于大多数制造业企业而言,具备企业级整体视角的治理人才依然难得,系统化的思考形式、解决简单业务管理问题的方法论也并不是久而久之就能量产的。 人才技术不够,软件硬件来凑。 明天咱们就来为大家讲讲如何应用纯前端表格控件+后端组件疾速搭建残缺的洽购报价零碎,让简单零碎不再简单,搭建简略,上手难度极低,残缺成熟的体系化解决方案,让企业数字化洽购治理变得轻松。 接下来咱们就带着大家一起看看,该零碎的搭建形式。(文末有我的项目代码,能够亲手感受一下) 我的项目实例1、该零碎应用数据驱动模板,报价所需的资料能够依据理论须要进行勾选,主动生成模板,如该零碎中预置的酒店报价模板,能够依据酒店装修的须要,对所需的资料进行勾选,动静生成报价模板,应用SpreadJS的数据绑定的性能,轻松实现了报表模板的生成: 当咱们制作完报价模板当前,须要对对应的供应商公布报价,咱们能够抉择局部供应商进行公布,收到该报价工作的供应商能力有权限参加报价: 供应商参加报价,对报价单进行填报,在应用SpreadJS的表格控件进行填报时,能够取得和Excel统一的填报体验,能够通过双击填充、拖拽填充等,疾速地实现报价表的填报,同时因为应用了SpreadJS的数据绑定性能,能够将填报数据独自取出,不便前面进行比价和剖析汇总: 当供应商实现报价后,管理员要对供应商的报价进行剖析和汇总,依据剖析后果抉择最具性价比的供应商,利用SpreadJS图表的性能,能够对供应商的报价以图表的模式展示进去,不便剖析汇总,同时因为报表是用数据驱动的,能够和Echarts进行交互,通过可视化工具,更直观地进行供应商报价的比拟和剖析: 源码下载地址: https://gcdn.grapecity.com.cn... 到这里咱们就实现了一个洽购零碎的搭建,大家如果想理解应用纯前端在线表格的行业利用实例,欢送查看: https://www.grapecity.com.cn/...

October 27, 2022 · 1 min · jiezi

关于葡萄城开发技术:一篇带你了解如何使用纯前端类Excel表格构建现金流量表

现金流量表(Cash Flow Statement),是指反映企业在肯定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个根本报告之一(另外两个是资产负债表和损益表)。为了全面系统地揭示企业肯定期间的财务状况、经营成绩和现金流量,财务报表需按财政部会计准则的规范格局设计,因而,财务报表的典型特色是数据更新频繁、剖析维度多、数据起源简单,惯例的报表工具很难同时满足上述所有需要本博客将带大家理解如何应用类Excel 的 JavaScript 电子表格在前端创立现金流日历。此日历将宽泛应用以下弱小性能: 动静数组公式 - 依据一个公式将多个后果返回到一系列单元格。此示例应用 SEQUENCE 和 FILTER 函数。RANGEBLOCKSPARKLINE(template_range, data_expr) - 此迷你图容许开发人员将单元格范畴模板 (template_range) 定义为单个单元格类型,并将该模板利用于单元格以将一组数据 (data_expr) 加载到模板中。该模板能够包含多行和/或多列。最终成果如图所示: 点击此处下载残缺示例。 要创立咱们的现金流日历,咱们须要创立如下所述的三张表: 数据源表模板表现金流日历:渲染表数据源表咱们示例的数据源是交易列表。 咱们创立了一个更动静的表格,当咱们须要数据而不是单元格范畴时,咱们能够援用 Table1。 此表蕴含无关 TransactionID、交易类型、交易日期、公司名称、帐户名称、贷款金额和取款的信息。 模板表此页面蕴含咱们将用来出现现金流日历中产生的交易的模板范畴。 此处的此单元格范畴将用作蕴含现金流日历中所需信息的单元格的模板。 咱们要做的第一件事是排列单元格,而后设置单元格的绑定门路。 它能够通过 Javascript 应用 SpreadJS setBindingPath 办法来实现。 templateSheet.setBindingPath(0, 1, "month");templateSheet.setBindingPath(1, 2, "date");templateSheet.setBindingPath(2, 2, "start");templateSheet.setBindingPath(3, 2, "withdrawals");templateSheet.setBindingPath(4, 2, "deposits");templateSheet.setBindingPath(5, 2, "end");当然,上边这步操作也有不必写代码的办法——用SpreadJS设计器,下载SpreadJS安装包,在下载的安装包中,从“\SpreadJS.Release.x.x.x\Designer\Designer Runtime”门路下找到设计器的安装包,实现装置后,依照下列步骤操作: 单击数据选项卡上的模板菜单 - 字段列表面板将呈现在右侧将鼠标悬停在 Start 分支上并通过单击绿色 + 按钮增加字段 *请留神,你能够应用“x”按钮删除字段并应用位于分支右侧的设置批改这些字段拖动模板范畴所需单元格中的字段为了使现金短缺(期末余额为负)的日子能够用红色着色,期末余额为正的日子用绿色着色,中性的用彩色着色,咱们能够应用条件格局。在设计器上能够这样操作: 在合并时抉择日期单元格“A2:D2”条件格局 → 新规定通常,键入并抉择应用公式来确定要格式化的单元格输出你的公式,在咱们的例子中 ='Cell Template'!$C$6>0单击格局→填充→抉择绿色作为字体色彩反复雷同的步骤,但应用公式: ='Cell Template'!$C$6<0 *请留神,对于余额为负的状况,色彩应设置为红色现金流日历:渲染表第 1 步:增加 MonthPicker 元素咱们日历的第一个元素是可变月份元素。要增加它,请应用 MonthPicker,这是 SpreadJS 中的一种下拉单元格款式。 ...

October 20, 2022 · 2 min · jiezi

关于葡萄城开发技术:提高工作效率的神器基于前端表格实现Chrome-Excel扩展插件

Chrome插件,官网名称extensions(扩大程序);为了不便了解,以下都称为插件。咱们开发的插件须要在浏览器外面运行,关上浏览器,通过右上角的三个点(自定义及管制)-更多工具-拓展程序-关上开发者模式。点击"加载已解压的拓展程序,抉择我的项目文件夹,就可将开发中的插件加载进来。插件是基于Web技术构建的,例如HTML、JavaScript和CSS。它们在独自的沙盒执行环境中运行并与Chrome浏览器进行交互。插件容许咱们通过应用API批改浏览器行为和拜访Web内容来扩大和加强浏览器的性能。置信应用Chrome(谷歌浏览器)的小伙伴们都在用Chrome扩大插件(Chrome Extension),相似一键翻译、批量下载网页图片、OneTab、甚至赫赫有名的 ”油猴” 等。 然而有时候,咱们须要一些Chrome利用市场上没有的特定性能的插件,例如工作揭示、报表主动生成、与外部数据系统交互的数据分析或上传下载等。作为产品论坛技术支持的超级版主,每日须要回复用户提出的大量问题,往往一个不留神,很容易漏回用户帖子。这时候有这么一个浏览器插件,随时揭示你还有多少帖子待回复,是不是很炫酷呢?当你早晨回复完所有论坛帖子,这时候插件徽章上不再有数字,这时候是不是成就感满满。 明天咱们就带大家来花30分钟工夫,一起写一个展现待办工作的浏览器插件。 获取本文的残缺Demo:https://gcdn.grapecity.com.cn... 接下来就让咱们正式开始我的项目 首先在package.json文件中引入相干依赖文件 { "dependencies": { "@grapecity/spread-excelio": "15.2.0", "@grapecity/spread-sheets": "15.2.0", "@grapecity/spread-sheets-resources-zh": "15.2.0" }}其次创立容器。在manifest.json文件中,能够配置点击插件图标时弹出的小窗口的页面。这里配置了index.html页面。接着咱们在index.html中创立SpreadJS的指标DOM元素: <div id="ss" style="width: 99%; height: 430px;"></div>创立容器之后,就能够初始化SpreadJS了。在GC.Spread.Sheets.Workbook构造函数中,有两个参数。第一个参数是宿主dom元素或者id,这里是‘ss’。第二个参数是初始化选项。这里设置了三个值: sheetCount、scrollbarMaxAlign、newTabVisible;别离示意表单数量,滚动条与流动表单的最初一行和最初一列对齐,不显示新增表单选项。 window.onload = function () {var spread = new GC.Spread.Sheets.Workbook("ss",{ sheetCount: 1, scrollbarMaxAlign:true, newTabVisible:false });};获取SpreadJS对象后,就能够进行绑定数据、进行数据展现啦。首先能够为其绑定列,自定义表头,依据列名设置宽度,依据内容设置数据格式或者单元格类型等。这时候能够定义帖子题目,发帖工夫,是否金牌用户、地区等等信息。 var sheet = spread.getActiveSheet();var colInfos = [ {name: "帖子题目", displayName: "帖子题目", size: 300}, { name: "发帖工夫", displayName: "发帖工夫", size: 100, formatter: "MM-dd hh:mm", },{ name: "city", displayName: "地区", cellType: ColorArea }, ]; sheet.autoGenerateColumns = false; sheet.bindColumns(colInfos);其次通过XMLHttpRequest获取工作列表数据,获取数据后,能够进行表单数据绑定。 ...

October 20, 2022 · 2 min · jiezi

关于葡萄城开发技术:React-Springboot-Quartz从0实现Excel报表自动化

一、我的项目背景企业日常工作中须要制作大量的报表,比方商品的销量、销售额、库存详情、员工打卡信息、保险报销、办公用品洽购、差旅报销、我的项目进度等等,都须要制作统计图表以更直观地查阅。然而报表的制作往往须要消耗大量的工夫,即便复用制作好的报表模版,一次次周期性对数据的复制粘贴操作也很耗人,同时模版在此过程中也会逐步变得面目全非。基于此,咱们须要开掘数据背地暗藏的关联信息,将人工的常规性操作抽离进去,应用工具和代码去实现,这个过程就称之为报表自动化。文内附前后端demo我的项目源码,家人们自行下载即可。 二、报表自动化的劣势报表自动化带来的价值有哪些呢?1、节省时间,提高效率身处信息爆炸的时代,任何一家企业都有体量宏大、结构复杂、各种各样的数据,多类数据交互交融,对其进行剖析常常随同着大量人力资源的耗费。自动化报表通过正当的设计,独立出各个业务功能模块,后续反复援用该模块,实现反复操作的代码复用。对于固定流程或逻辑的一些操作,计算机的执行速度是人力不可及的,为咱们节俭了工夫,能够投入更有意义的工作。2、升高出错率人工操作总是受太多不可控因素影响,存在各种出错的潜在可能。与之相比,自动化意味着通过编码伎俩实现了长久化的逻辑、流程,通过反复的测试验证之后,便可齐全信赖该程序。在重复性的工作场景下机器产出的稳定性远高于人工操作。3、时效性高日报、周报、月报这种周期性的报表,人为操作很难管制工夫的准确性,然而通过代码管制能够最大水平的保障其定点触发操作。 三、零碎性能点工作配置灵便:反对依据业务需要,通过界面操作控制工作的启停状态,工作对应生成的文件类型等。报表模版设计自在:业务人员可依据对应工作配置的预览数据自定义报表模版,而后将其保留失效。前端预览:反对从前端预览报表详情。定时发送:定时生成报表文件并将其同步到微信群。反对多种类型:反对Excel、PDF、图表等文件类型的报表格局。数据主动抽取:动静读取数据库中的数据生成报表。模版和数据独立存储:应用在线表格设计器编辑模版,存储时只保留模版,数据从数据库加载。四、方案设计1、整体流程报表自动化的终点是能对接数据源,期间能自动化的生成当时设计好格局的报表,最终通过企业微信主动推送音讯。具体流程能够分为3个步骤:1.报表模版设计2.对接数据源:从数据库中读取数据,动静适配数据模版。3.自动化过程实现:利用定时工作,定时捞取数据,借助GcExcel生成对应类型的文件,通过对接企业微信的API,将文件同步到微信群。 2、技术栈前端:React+SpreadJSDemo地址:https://gcdn.grapecity.com.cn...后端:Java+GcExcel+Mysql+QuartzDemo地址:https://gcdn.grapecity.com.cn... 3、具体实现3.1 数据库表设计note:此为测试demo,故没有创立主键索引之外的索引。3.1.1 工作配置列表 task_config依赖Quartz组件实现定时工作。读取工作配置表中启动状态的工作配置,依照工作类型读取对应数据源的增量更新数据。 字段名称字段类型字段含意备注idlongID自增主键task_idvarchar工作ID task_typevarchar工作类型和工作内容对应,比方订单/物流单信息task_namevarchar工作名称 task_statusint工作状态1:启动 0:终止 只有启动状态的配置能力生成工作信息task_contexttext工作内容模版信息,依照模版绑定数据源save_typechar保留类型保留文件的类型 excel/PDFtime_spanint执行工作的工夫距离单位s。operatorchar操作者便于追溯create_timedateTime创立工夫 update_timedateTime更新工夫 SQLCREATE TABLE `task_config` ( `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT '自增主键', `task_id` VARCHAR(64) NOT NULL DEFAULT '' COMMENT '工作ID', `task_type` VARCHAR(64) DEFAULT NULL DEFAULT '' COMMENT '工作类型', `task_name` VARCHAR(128) NOT NULL DEFAULT '' COMMENT '工作名称', `task_status` TINYINT(4) NOT NULL DEFAULT 0 COMMENT '工作状态:1:启动 0:终止', `task_context` text COMMENT '工作模版信息', `time_span` TINYINT(4) NOT NULL DEFAULT 0 COMMENT '工夫距离,单位s', `operator` VARCHAR(64) NOT NULL DEFAULT '' COMMENT '操作人', `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创立工夫', `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新工夫', PRIMARY KEY (`id`) USING BTREE) ENGINE=INNODB DEFAULT CHARSET=UTF8MB4 COMMENT='工作配置表';3.1.2 订单信息表 order订单相干数据源信息,对应订单类的报表工作。 ...

October 20, 2022 · 2 min · jiezi

关于葡萄城开发技术:万物皆可集成系列低代码通过Web-API

数据录入在利用中是最常见也是最沉重的一项工作,而对于根底数据的保护更是要保障其准确性。比方须要录入身份证信息时,手工输出的效率低还容易出错;报销填发票时,要从一张一张的发票中找到金额、开票日期等一堆信息,始终反复着简单的工作,相似的场景不可胜数。但当初,咱们能够齐全通过百度AI文字辨认性能解决以上问题,文字辨认准确性高、稳定性强、简略易用,而且实用于多种场景,同时能够节约录入工夫,加重工作量,进步工作效率。在之前的内容中咱们曾经介绍了活字格如何与其它零碎、利用对接,明天来说说在活字格中如何应用百度AI来智能辨认身份证,驾驶证,行驶证,银行卡,营业执照和增值税发票。 我的项目实战为了更容易地应用百度AI智能辨认的性能,咱们将其封装成了插件,因而您须要先下载并在设计器中装置插件;其次,须要登录百度智能云,在"文字辨认"服务中创立一个新的利用,并获取API Key和Secret Key。 以上筹备工作实现后,就能够进行开发工作啦: 数据库中新建WebConfig表,并且配置获取到的ApiKey,SecretKey 在页面应用文字辨认插件时,为了保障失常应用插件,须要增加3个辅助单元格增加遮罩图片单元格,命名为message(命名不能批改为其它值)增加图片名称单元格,类型为文本框,该值等于上传图片单元格的值,设置文字辨认命令,这样上传图片后会触发文本框命令,从而进行辨认增加遮罩动画单元格,类型为图片,可用来设置图片辨认时的加载动画,命名为loading(命名不能批改为其它值)留神:A1单元格是要被插件应用的,增加文字或者设置名称均能够。 抉择不同的辨认类型,会创立对应的返回后果,将返回后果写到对应的单元格上并进行后续操作,也能够将辨认后果字段以单元格名称进行绑定哦。 当类型是增值税发票时,因为发票辨认可能会有多行明细,因而须要有一个表格来接收数据,表格名须要保持一致,表格中的列如下图所示。 依照以上步骤开发实现后,并不一定就高枕无忧,运行时也可能会遇到些奇奇怪怪的问题,接下来咱们就看看可能会遇到的坑: QPS超限额 起因:只是创立了利用,但没有开明对应的API接口。能够在概览中,点击支付免费资源,把每个服务类型下的接口都全选,而后点击0元支付,当然也能够间接开明或者购买。 辨认失败,请查看配置从新尝试 起因:● ApiKey,SecretKey配置谬误● 上传的文件类型和辨认的文件类型不统一● 辨认后果返回的单元格不是能够输出的单元格,个别设置为文本框即可 通过百度AI智能辨认性能,咱们能够将一些证件信息获取下来,至于接下来要怎么用这些数据就随便啦。以下是工程文件附件,供大家参考哈~https://gcdn.grapecity.com.cn... 大家如果对更多低代码系列文章感兴趣:https://www.grapecity.com.cn/...

October 20, 2022 · 1 min · jiezi

关于葡萄城开发技术:葡萄城受邀参加WOT全球技术创新大会

9月,WOT(World of Tech)寰球技术创新大会在北京举办。葡萄城受邀加入本次大会,技术布道师姚尧学生缺席并为大家带来了大前端表格技术分享的主题演讲。WOT(World of Tech)寰球技术创新大会是由51CTO创始的综合性高端技术会议品牌,致力于展示国内外技术畛域的热点和趋势、搭建寰球技术人的深度分享和宽泛交流平台、推动先进技术在中国的场景落地和行业交融。自2012年首次举办以来,历时10年积淀,累计超过万名技术人员现场参加,覆波及人工智能、数据安全、音视频、大数据、架构、开源、云原生、前端、研发治理、算法、金融科技、微服务等话题,同时吸引了几百家国内外出名科技企业和行业龙头、近千位技术领军人物深度单干。 本次WOT北京站中,邀请到来自腾讯、贝壳、小米、葡萄城等软件和互联网行业头部公司技术专家和业内权威人士等重量级嘉宾,精选议题分享,从深度钻研到技术前瞻,为开发者们带来了一场别开生面的线下交流活动。大会上,葡萄城技术布道师姚尧基于葡萄城产品实际,分享了前端电子表格的技术实际计划。深刻解说了如何在资源无限的前端网页中实现成熟的表格控件高性能、低内存和可靠性高的特点。通过应用葡萄城Spread表格技术,开发者可能应用不到 100 行代码,在前端实现各类电子表格的性能。 随着WebAssembly、小程序、跨端、PWA、Flutter、Dart、RN、Vue、Angular等技术的一直迭代和厮杀,前端技术进一步倒退,低代码、AI 也进纷纷入局大前端畛域。葡萄城专一软件开发技术四十余年,继续引领控件技术和数据分析工具的倒退。将来,葡萄城心愿通过参加更多的技术沙龙流动来分享先进开发技术,通过技术赋能所有具备翻新精力的开发者,推动软件产业倒退,引领开发者们一道,开启将来数字世界的大门。

September 30, 2022 · 1 min · jiezi

关于葡萄城开发技术:如何通过执行SQL为低代码项目提速

见多了SQL为代码开发提速,那么当低代码遇到SQL会擦出怎么的火花呢?本文将低代码和SQL联合进行介绍,让大家理解如何通过执行SQL为低代码我的项目提速。 背景自从计算机诞生的一刻起,如何让计算机可能依照人类的需要进行工作,满足人类的须要就成为了一个问题,于是便诞生了计算机语言。最后的计算机语言是由0和1形成的机器语言,用二进制代码示意的计算机能间接辨认和执行的一种机器指令的汇合,运行快,然而不容易应用,上手艰难且难易了解。为了克服机器语言的毛病,人们将机器指令的代码用英文助记符来示意,代替机器语言中的指令和数据。便诞生了第二代编程语言——汇编语言,汇编语言在肯定水平中克服了机器语言难以学习应用的毛病,同时保障了执行速度快的长处,然而汇编语言的通用性,可读性还是很低。于是就诞生了以人类的日常语言为根底的一种编程语言,就是第三代编程语言——高级语言,像咱们熟知的JAVA、JS、C#等都属于第三代编程语言。 高级语言与计算机的硬件构造及指令系统无关,它有更强的表达能力,可不便地示意数据的运算和程序的控制结构,能更好地形容格中算法,而且更易学习把握,也是目前被程序员所应用的最为宽泛的语言,然而,第三代语言对于业务人员来说还是难以了解。须要在编程上有专门的训练能力应用。于是便诞生了第四代语言,即面向问题的语言。第四代语言是十分高级的语言,用户只须要简略的培训即可参加编程,解决特定的问题。同时,第四代语言比第三代语言更靠近日常语言,更容易编程,更宽泛地被非专业程序员所应用。像咱们明天的配角——SQL就属于第四代语言,使用者并不需要通知计算机要怎么做,只须要通知它执行命令内容即可。而低代码平台诞生能够追溯到第四代语言,第四代语言的次要特点就是简略易学、上手快。那应用第四代语言SQL再加上原本开发周期就短的低代码,能擦出怎么样的火花呢? SQL与低代码的碰撞咱们先来看看没有应用SQL性能的低代码是如何开发一个我的项目与数据库进行交互的,这里应用企业级低代码开发平台-活字格为例向大家介绍。活字格中是有数据库这个概念的,而且活字格在更新迭代的过程中也有从“无执行SQL性能”到“有执行SQL性能”的一个变动,这一过程正好能够作为展现执行SQL为低代码提速的最好例子。早些时候,大多数的低代码平台没有间接执行SQL性能,平台通过一些相似SQL性能去实现数据处理,比方活字格中的odata、数据表操作等性能,以实现执行数据表根本的DML操作。然而一旦明对更加简单的业务场景,须要执行SQL能力实现时,就未免显得顾此失彼。其性能比照执行SQL命令也有显著差距,能够看到应用执行SQL命令本来须要73秒能力做完的插入5000行数据操作,当初1.5秒的工夫就能够实现了。 由此可见在低代码我的项目中执行SQL能够大大晋升低代码我的项目的搭建速度,晋升低代码开发效率,使得开发效率原本就较高的低代码我的项目效率更高,那说了这么多执行SQL的长处,如何在低代码我的项目中执行SQL呢。还是以活字格这款企业级低代码开发平台来举例。应用SQL性能能够实现很多简单的性能,比方:编写和调用存储过程、创立长期表、创立表索引、创立多个联结查问等。这里找两个简略的例子给大家介绍一下如何在低代码我的项目中应用SQL。当初有数据表的设计如下:课程表(课程号、课程名、学分)、学生表(学号、姓名、性别、业余)、分数表(学号、课程号、分数)。而后当初的需要是输出课程名和学生名来查问这个学生的分数,那在活字格中怎么做呢,咱们一起来操作下。首先设置前端页面,将活字格中的文本框单元格类型,按钮单元格类型,设置在活字格的设计器页面中。 新建一个服务端命令,减少参数学生名,和课程名参数,命令中新建执行SQL命令,数据库抉择内建库(如果应用外联数据库也能够通过连贯字符串间接在外联数据库中操作),增加学生名和课程名参数,参数值间接从服务端命令接管的参数值中获取即可,写SQL语句如下SELECT 分数表.分数 FROM 分数表 join 课程表 on 分数表.课程号 = 课程表.课程号 join 学生表 on 分数表.学号 = 学生表.学号 where 学生表.姓名[email protected]学生名 and 课程表.课程名 [email protected]课程名;将执行SQL后果,也就是返回值写到变量SQL数组中。因为执行SQL命令返回的后果是一个json对象数组,所以须要应用循环命令去获得数组中的每个Json对象,再去取值即可。这里示例中当确定了姓名和课程名之后,分数就确定了,也就是SQL查问的后果中只有一条记录,所以循环第一次就能够应用返回命令将分数的值返回进去。 在页面中的按钮再应用调用服务端命令,调用构建好的SQL命令。学生名和课程名抉择设计好的文本框,将返回值返回到页面中的分数。这样就实现了这个需要了。 咱们能够看一下执行成果,学生名输出张三,课程名输出语文,点击查问,分数便显示88。 这样,这个需要在低代码中就能够通过执行SQL实现了。咱们来换一下需要,改为输出一个学生名查问出这个学生全副课程的问题。还是以活字格为例,咱们只需对下面的一些步骤做更改即可。首先,设置页面的步骤中,将课程名和课程名后的文本框删除掉,分数区域改为设置一个表格,表格中有课程列和分数列。 服务端命令中删除课程名参数,服务端命令中的执行SQL命令也删除课程名参数,批改SQL语句如下SELECT 分数表、分数、课程表、课程名 FROM、分数表 join 课程表 on 分数表、课程号 = 课程表、课程号 join 学生表 on 分数表、学号 = 学生表、学号 where 学生表、姓名[email protected]学生名,间接将查问的数组后果返回进来。 在前端调用时,将调用服务端命令的后果保留在SQL数组变量中,而后间接应用导入Json数据到表格命令将json对象数组导入到表格。 能够看到,在浏览器中文本框输出张三,点击查问,即可查问出张三全副的课程和分数。由此可见,通过执行SQL能够大大的晋升低代码我的项目的开发效率,在需要变动是也能很高速的通过批改SQL语句和低代码工程实现更改后的需要。 当然,这里只举了两个简略的例子来为大家展现如何通过执行SQL为低代码我的项目提速,一些更简单的需要如编写和调用存储过程,创立长期表等,都是能够通过执行SQL在低代码我的项目中实现的。大家如果感兴趣得话,能够找找相干的低代码产品来更具体的理解一下。 如果想理解更多地低代码技术常识拜访:https://help.grapecity.com.cn...

September 30, 2022 · 1 min · jiezi

关于葡萄城开发技术:前端必读20如何在React-中使用SpreadJS导入和导出-Excel-文件

最近咱们公司接到一个客户的需要,要求为正在开发的我的项目加个性能。我的项目的前端应用的是React,客户想增加具备Excel 导入/导出性能的电子表格模块。通过几个小时的原型构建后,技术团队确认所有客户需要文档中形容的性能都曾经实现了,并且原型能够在截止日期前做好演示筹备。然而,在跟产品组再次探讨客户需要时,咱们发现之前对无关电子表格的局部了解可能存在偏差。客户的具体需要点仅仅提到反对双击填报、具备边框设置、背景色设置和删除行列等性能,但这部分需要形容不是很明确,而且最初提到“像Excel的相似体验”,咱们之前疏忽了这句话背地的信息量。通过与客户的业务需求方的间接沟通,能够确认终端用户就是想间接在网页端操作Excel,并且间接把编辑实现的表格以Excel的格局下载到本地。 本文demo下载地址:https://gcdn.grapecity.com.cn... 如何把前端表格增加到你的React利用中你能够看到在 StackBlitz 上实时运行的动态表格应用程序,并且能够在此处找到演示源。如果你想要曾经增加了 SpreadJS 的成熟应用程序,请下载此示例。实现后,关上终端,导航到克隆存储库的目录,而后运行: > npm install当初你将看到更新后的应用程序正在运行。 Step 1: 原生HTML表格 该应用程序的前端基于 ReactJS 构建,并由应用 JSX 语法、JavaScript 和 HTML 代码组合创立的组件形成。该应用程序是应用性能组件的语法创立的。这种办法使咱们能够防止编写类,这会使组件更加简单和难以浏览。仪表板位于 JSX 组件层次结构的顶部。它出现 HTML 内容并保护应用程序状态,源自具备虚构 JSON 销售数据的文件。每个子组件负责出现其内容。因为只有 Dashboard 保留应用程序状态,因而它通过 props 将数据向下传递给每个子组件。 Import React, { useState } from ‘react’;import { NavBar } from ‘./NavBar’import { TotalSales } from ‘./TotalSales’import { SalesByCountry } from ‘./SalesByCountry’import { SalesByPerson } from ‘./SalesByPerson’import { SalesTable } from ‘./SalesTable’import { groupBySum } from “../util/util”;import { recentSales } from “../data/data”;export const Dashboard = () => {const sales = recentSales;function totalSales() { const items = sales; const total = items.reduce( (acc, sale) => (acc += sale.value), 0 ); return parseInt(total);};function chartData() { const items = sales; const groups = groupBySum(items, “country”, “value”); return groups;};function personSales() { const items = sales; const groups = groupBySum(items, “soldBy”, “value”); return groups;};function salesTableData() { return sales;};return ( <div style={{ backgroundColor: ‘#ddd’ }}> <NavBar title=”Awesome Dashboard” /> <div className=”container”> <div className=”row”> <TotalSales total={totalSales()}/> <SalesByCountry salesData={chartData()}/> <SalesByPerson salesData={personSales()}/> <SalesTable tableData={salesTableData()}/> </div> </div> </div>);}Step 2: 替换为SpreadJS表格在编写任何代码行之前,咱们必须首先装置 GrapeCity 的 Spread.Sheets Wrapper Components for React。只需进行应用程序,而后运行以下两个命令: ...

September 22, 2022 · 4 min · jiezi

关于葡萄城开发技术:前端必读如何在-JavaScript-中使用SpreadJS导入和导出-Excel-文件

JavaScript在前端畛域占据着相对的统治位置,目前更是从浏览器到服务端,挪动端,嵌入式,简直所有的所有的应用领域都能够应用它。技术圈有一句很经典的话“但凡能用JavaScript实现的货色,最初都会用JavaScript实现”。Excel 电子表格自 1980 年代以来始终为各行业所宽泛应用,至今已领有超过3亿用户,大多数人都相熟 Excel 电子表格体验。许多企业在其业务的各个环节中应用了 Excel 电子表格进行数据管理。 在本博客中,咱们将介绍如何依照以下步骤在 JavaScript 中,实现页面端电子表格导入/导出到 Excel:残缺Demo示例请点击此处下载。 设置 JavaScript 电子表格我的项目增加 Excel 导入代码将数据增加到导入的 Excel 文件增加迷你图增加 Excel 导出代码 设置 JavaScript 电子表格我的项目首先,咱们能够应用托管在 NPM 上的 SpreadJS 文件。为此,咱们能够应用命令行参数进行装置。关上命令提示符并导航到应用程序的地位。在那里,您能够应用一个命令装置所需的文件。 在这种状况下,咱们须要根本的 Spread-Sheets 库、Spread-ExcelIO 和 jQuery: npm i @grapecity/spread-sheets @grapecity/spread-excelio jquerySpreadJS 不依赖于 jQuery,但在这种状况下,咱们应用它来提供简略的跨域申请反对,稍后咱们将对其进行回顾。 一旦装置了这些,咱们就能够在咱们的代码中增加对这些脚本和 CSS 文件的援用: <!DOCTYPE html> <html> <head> <title>SpreadJS ExcelIO</title> <script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script> <link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script> <script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script></head> <body> <div id="ss" style="height:600px; width :100%; "></div> </body> </html> 除了 SpreadJS 和 jQuery 文件之外,咱们还须要导入 FileSaver 库,为了便于后续程序处理,SpreadJS默认提供残缺的文件流,FileSaver库能够用来把文件流转成文件下载到本地。 ...

September 22, 2022 · 3 min · jiezi

关于葡萄城开发技术:100大屏模板免费领葡萄城BI行业应用方案重磅发布

近年来,数字经济的蓬勃衰亡为企业在数据智能畛域的翻新倒退构筑了广大的舞台,数据作为根底策略资源和要害生产因素的位置日益凸显。数据可视化大屏作为一种用于数据分析的热门利用,可能帮忙企业无效开掘海量数据资产、实现差异化竞争。 但咱们发现在理论利用场景中,设计出完满适配行业典型利用场景、不同场景下的业务须要、可能疾速利用于各类我的项目、好看炫酷的大屏,并不是一件容易的事。如何疾速制作炫酷的数据可视化大屏并使其可能利用于我的项目,是以后亟待解决的问题。葡萄城Wyn商业智能软件紧跟嵌入式剖析发展趋势,联合葡萄城 40 年控件研发技术,让产品具备业界当先的嵌入式集成能力。历经多年积攒,Wyn技术团队总结出多个以用户、场景为核心,多行业、多业态、多终端的BI数据可视化解决方案,将于9月23日(下周五)14:00-15:30为您带来一场精彩的行业利用计划发布会,帮忙智能制作、智慧工程、智慧教育、智慧运维、智慧金融等各行业客户全面晋升数据分析能力。 同时,本场发布会将为您提供各类典型、易用多行业“数据可视化大屏”经典模板,并为业余数据人分析“行业可视化大屏设计”背地的行业痛点,针对不同行业 “隔靴搔痒”,进行无效数据分析和治理,让数据可视化大屏真正源于“业务”、用于“业务”。 通过观看本场发布会,您能够: 理解当先BI技术利用前沿趋势获取针对制作、金融、医疗、修建等15个行业的BI解决方案深刻把握BI大屏在数据可视化我的项目中的利用场景和办法领略百余个数据可视化大屏的利用成果与风采收费获取100+大屏模板,500+设计素材扫描下方海报二维码,立刻预约观看并获取免费模板!本次流动还为您筹备了华为FreeBuds Pro蓝牙耳机、SKG颈椎按摩器K3降级款和品牌双肩电脑包等多重大牌好礼,将在直播中收费抽奖送出。福利满满,不容错过~ (舒适提醒:请您精确填写邮箱,本次发布会完结后,葡萄城将通过邮件为您发送大屏模板与素材!)

September 20, 2022 · 1 min · jiezi