spreadjs设计器自定义在线表格

2023-10-21 09:12
文章标签 设计 自定义 表格 在线 spreadjs

本文主要是介绍spreadjs设计器自定义在线表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

spreadjs设计器自定义在线表格

spreadjs：16

<template><div class="app-container"><el-row :gutter="20"><el-col :span="otherSpan" :xs="24"><!--    excel在线表格    --><el-row :gutter="10" class="mb8" v-if="tableAttributes"><gc-spread-sheets-designer :styleInfo='styleInfo':config='config'@designerInitialized="designerInitialized"class="excel-class"></gc-spread-sheets-designer></el-row></el-col></el-row></div>
</template><script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { mul } from '@/utils/util'
import  '@grapecity/spread-sheets-vue'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import '@grapecity/spread-sheets-designer-vue'
import * as GC from '@grapecity/spread-sheets'
import * as DesignerGC from '@grapecity/spread-sheets-designer'
//设置中文语言环境
GC.Spread.Common.CultureManager.culture('zh-cn')
//授权
GC.Spread.Sheets.LicenseKey = 'your key';
DesignerGC.Spread.Sheets.Designer.LicenseKey = "your key";
export default {name: 'Scoring',data() {return {styleInfo: { height: '725px', width: '100%' },config: null,spread: null,}},methods: {//获取spread实例designerInitialized: function (designer) {this.spread = designer.getWorkbook();let config = GC.Spread.Sheets.Designer.DefaultConfig;//创建按钮let dataSaveInfo = {'saveTemplateCommand':{iconClass:'ribbon-button-save',  //按钮的样式text: "保存", //显示的文字bigButton: true,commandName: "saveData", //命令名称，需要全局唯一execute: this.saveInfo //对应执行内容的function}}//将图标放入工具栏if (!(config.ribbon[0].buttonGroups[0].label === '保存')){config.ribbon[0].buttonGroups.unshift( {label:'保存',thumbnailClass:'ribbon-thumbnail-spreadsettings',commandGroup:{children:[{direction: "vertical",commands: ["saveTemplateCommand"],}]}});}config.commandMap={};Object.assign(config.commandMap, dataSaveInfo);this.config = config;this.spread.options.newTabVisible = false;this.spread.options.tabNavigationVisible = false;this.spread.options.scrollbarMaxAlign = true;this.spread.invalidateLayout();this.spread.repaint();},//初始化在线表格initSpreadSheet(){let sheet = this.spread.getSheet(0);sheet.name("汇总");sheet.setDataSource(this.dataTable);var colInfos = [{ name: "yf", displayName: "月份",size: 180 },{ name: "fzbm", displayName: "部门", size: 180 },{ name: "xjxz", displayName: "新疆西藏项目", size: 180 },{ name: "sfzs", displayName: "赠送/区域项目", size: 180 },{ name: "zcsjzl", displayName: "资产治理项目", size: 180 },{ name: "xffhs", displayName: "新方法核算", size: 180 },{ name: "sfwnxm", displayName: "是否新项目", size: 180 },{ name: "status", displayName: "数据状态", size: 180 },{ name: "xh", displayName: "唯一项目编号", size: 180 },{ name: "xmbh", displayName: "项目编号",size: 180 },{ name: "khmc", displayName: "客户名称", size: 180 },{ name: "sjkhmc", displayName: "实际客户名称", size: 180 },{ name: "ysdsftj", displayName: "纸质验收单是否提交", size: 180 },{ name: "sfsydzxt", displayName: "是否使用对账系统", size: 180 },{ name: "xmjlbh", displayName: "项目经理编号", size: 180 },{ name: "xmjlxm", displayName: "项目经理", size: 180 },{ name: "ysgsbh", displayName: "验收绩效归属员工编号", size: 180 },{ name: "ysgsxm", displayName: "验收绩效归属", size: 180 },{ name: "fwrybh", displayName: "服务人员员工编号", size: 180 },{ name: "fwryxm", displayName: "服务人员", size: 180 },{ name: "fwryfs", displayName: "服务人员打分", formatter:'0.00', size: 180 },{ name: "zcts", displayName: "项目验收总资产条数", formatter:'0', size: 180 },{ name: "xmlb", displayName: "项目类别", formatter:'0', size: 180 },{ name: "xmdj", displayName: "项目单价", formatter:'0.00', size: 180 },{ name: "jdzb", displayName: "工作环节占全流程比例", formatter:'0.00%', size: 180 },{ name: "xmzjx", displayName: "项目总绩效", formatter:'0.00', size: 180 },{ name: "bz", displayName: "备注", size: 180 },];sheet.bindColumns(colInfos);this.spread.resumePaint();},//保存点击事件,进行信息保存saveInfo(e){let sheet = this.spread.getSheet(0);let data = sheet.getDataSource();saveOnlineExcelInfo(data).then(res => {this.tableAttrbute = true;this.tableAttributes = false;this.$message.success(res.msg);this.back = false;});}}
}
</script><style scoped lang="scss">
.tree-area {max-height: 80vh;overflow: auto;
}
.el-descriptions {width: 30%;padding-left: 4em;::v-deep .my-label {font-weight: 600;}
}
.excel-class {::v-deep .ribbon-button-save {background-image: url('../../../assets/images/save.jpg');}
}
</style>

16所需要的依赖

		"@grapecity/spread-excelio": "^16.2.4","@grapecity/spread-sheets": "^16.2.4","@grapecity/spread-sheets-barcode": "^16.2.4","@grapecity/spread-sheets-charts": "^16.2.4","@grapecity/spread-sheets-designer": "^16.2.4","@grapecity/spread-sheets-designer-resources-cn": "^16.2.4","@grapecity/spread-sheets-designer-resources-en": "^16.2.4","@grapecity/spread-sheets-designer-vue": "^16.2.4","@grapecity/spread-sheets-io": "^16.2.4","@grapecity/spread-sheets-languagepackages": "^16.2.4","@grapecity/spread-sheets-pdf": "^16.2.4","@grapecity/spread-sheets-pivot-addon": "^16.2.4","@grapecity/spread-sheets-print": "^16.2.4","@grapecity/spread-sheets-resources-zh": "^16.2.4","@grapecity/spread-sheets-shapes": "^16.2.4","@grapecity/spread-sheets-tablesheet": "^16.2.4","@grapecity/spread-sheets-vue": "^16.2.3",

12版本

<template><div class="app-container"><el-row :gutter="20"><el-col :span="otherSpan" :xs="24"><!--    excel在线表格    --><el-row :gutter="10" class="mb8" v-if="tableAttributes"><gc-spread-sheets:hostClass='hostClass'@workbookInitialized="designerInitialized"></gc-spread-sheets></el-row></el-col></el-row></div>
</template><script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { mul } from '@/utils/util'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-resources-zh'
import * as SpreadLicense from "../../../utils/spread/spread-license"
import ExcelIo from '@grapecity/spread-excelio'
import * as GC from '@grapecity/spread-sheets'//设置中文环境
GC.Spread.Common.CultureManager.culture("zh-cn");
const spreadLicenseInit = function (){const SpreadNs = GC.Spread.Sheets;SpreadLicense._de2343();ExcelIo.LicenseKey = SpreadNs.LicenseKey;
}
spreadLicenseInit();
import  '@grapecity/spread-sheets-vue'
export default {name: 'Scoring',data() {return {hostClass:'spread-host',autoGenerateColumns:true,width:300,visible:true,resizable:true,scrollbarMaxAlign:true,scrollbarShowMax:true,pageColor:"white",worksheetName:'汇总',dataTable:[],spread: null,back:false,save:false,displayOrHide:true,}},methods: {//获取spread实例designerInitialized: function (spread) {this.spread = spread;this.spread.options.newTabVisible = false;this.spread.options.tabNavigationVisible = false;this.spread.options.scrollbarMaxAlign = true;this.spread.options.tabStripVisible = false;this.spread.options.scrollbarShowMax = true;this.spread.options.showVerticalScrollbar = false;this.spread.options.grayAreaBackColor = 'white'this.spread.options.allowUserEditFormula = true;this.spread.invalidateLayout();this.spread.repaint();},//初始化在线表格initSpreadSheet(){let sheet = this.spread.getSheet(0);sheet.setDataSource(this.dataTable);sheet.setRowHeight(0, 55.0,GC.Spread.Sheets.SheetArea.colHeader);let row = sheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);row.backColor("#cccccc");row.font("16px")var colInfos = [{ name: "yf", displayName: "月份",size: 180 ,formatter: '@'}, // formatter='@'标识展示文本格式{ name: "fzbm", displayName: "部门", size: 180 ,formatter: '@'},{ name: "xjxz", displayName: "新疆西藏项目", size: 180 ,formatter: '@'},{ name: "sfzs", displayName: "赠送/区域项目", size: 180 ,formatter: '@'},{ name: "zcsjzl", displayName: "资产治理项目", size: 180 ,formatter: '@'},{ name: "xffhs", displayName: "新方法核算", size: 180 ,formatter: '@'},{ name: "sfwnxm", displayName: "是否新项目", size: 180 ,formatter: '@'},{ name: "status", displayName: "数据状态", size: 180 ,formatter: '@'},{ name: "xh", displayName: "唯一项目编号", size: 180 ,formatter: '@'},{ name: "xmbh", displayName: "项目编号",size: 180 ,formatter: '@'},{ name: "khmc", displayName: "客户名称", size: 180 ,formatter: '@'},{ name: "sjkhmc", displayName: "实际客户名称", size: 180 ,formatter: '@'},{ name: "ysdsftj", displayName: "纸质验收单是否提交", size: 180 ,formatter: '@'},{ name: "sfsydzxt", displayName: "是否使用对账系统", size: 180 ,formatter: '@'},{ name: "xmjlbh", displayName: "项目经理编号", size: 180 ,formatter: '@'},{ name: "xmjlxm", displayName: "项目经理", size: 180 ,formatter: '@'},{ name: "ysgsbh", displayName: "验收绩效归属员工编号", size: 180,formatter: '@' },{ name: "ysgsxm", displayName: "验收绩效归属", size: 180,formatter: '@' },{ name: "fwrybh", displayName: "服务人员员工编号", size: 180 ,formatter: '@'},{ name: "fwryxm", displayName: "服务人员", size: 180 ,formatter: '@'},{ name: "fwryfs", displayName: "服务人员打分", formatter:'0.00', size: 180 },{ name: "zcts", displayName: "项目验收总资产条数", formatter:'0', size: 180 },{ name: "xmlb", displayName: "项目类别", formatter:'0', size: 180 }, //展示整数{ name: "xmdj", displayName: "项目单价", formatter:'0.00', size: 180 }, //数字格式，保留两位小数{ name: "jdzb", displayName: "工作环节占全流程比例", formatter:'0.00%', size: 180 }, //标识展示百分数{ name: "xmzjx", displayName: "项目总绩效", formatter:'0.00', size: 180 },{ name: "bz", displayName: "备注", size: 180 ,formatter: '@'},];sheet.bindColumns(colInfos);// 在你的数据范围上启用筛选功能sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(-1, 0, 0, 27)));sheet.options.isProtected = false;this.spread.resumePaint();} 
}
</script><style scoped lang="scss">
.tree-area {max-height: 80vh;overflow: auto;
}
.el-descriptions {width: 30%;padding-left: 4em;::v-deep .my-label {font-weight: 600;}
}
.spread-host{width: 100%;height: 700px;
}
</style>

所需依赖

    "@grapecity/spread-excelio": "12.2.1","@grapecity/spread-sheets": "12.2.1","@grapecity/spread-sheets-print": "12.2.1","@grapecity/spread-sheets-resources-zh": "12.2.1","@grapecity/spread-sheets-vue": "12.2.1",

这篇关于spreadjs设计器自定义在线表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/253410。

相关文章

不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
电力系统中的A类在线监测装置—APView400

电力系统中的A类在线监测装置—APView400

随着电力系统的日益复杂和人们对电能质量要求的提高，电能质量在线监测装置在电力系统中得到广泛应用。目前，市场上的在线监测装置主要分为A类和B类两种类型，A类和B类在线监测装置主要区别在于应用场景、技术参数、通讯协议和扩展性。选择时应根据实际需求和应用场景综合考虑，并定期维护和校准。电能质量在线监测装置是用于实时监测电力系统中的电能质量参数的设备。 APView400电能质量A类在线监测装置以其多核
阅读更多...
怎么让1台电脑共享给7人同时流畅设计

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域，图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能，成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限，比如只有一台高性能电脑时，如何高效地让七人同时流畅地进行设计工作，便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器（CPU）：选择多核、高线程的处理器，例如Intel的至强系列或AMD的Ry
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
基于51单片机的自动转向修复系统的设计与实现

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师，一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生，希望您们都共创辉煌！✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机
阅读更多...
Go Playground 在线编程环境

Go Playground 在线编程环境

For all examples in this and the next chapter, we will use Go Playground. Go Playground represents a web service that can run programs written in Go. It can be opened in a web browser using the follow
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2