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。

相关文章

Java实现自定义table宽高的示例代码

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格（JTable）作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码
阅读更多...
一文详解Java Stream的sorted自定义排序

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
Python实现精准提取 PDF中的文本,表格与图片

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容：获取整页文本与指定区域内容获取页面上的所有文本内容获取
阅读更多...
基于Python实现一个简单的题库与在线考试系统

基于Python实现一个简单的题库与在线考试系统

《基于Python实现一个简单的题库与在线考试系统》在当今信息化教育时代,在线学习与考试系统已成为教育技术领域的重要组成部分,本文就来介绍一下如何使用Python和PyQt5框架开发一个名为白泽题库系... 目录概述功能特点界面展示系统架构设计类结构图Excel题库填写格式模板题库题目填写格式表核心数据结构
阅读更多...
如何自定义一个log适配器starter

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》：本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor
阅读更多...
MyBatis设计SQL返回布尔值(Boolean)的常见方法

MyBatis设计SQL返回布尔值(Boolean)的常见方法

《MyBatis设计SQL返回布尔值(Boolean)的常见方法》这篇文章主要为大家详细介绍了MyBatis设计SQL返回布尔值(Boolean)的几种常见方法,文中的示例代码讲解详细,感兴趣的小伙伴... 目录方案一：使用COUNT查询存在性（推荐）方案二：条件表达式直接返回布尔方案三：存在性检查（EXI
阅读更多...
Druid连接池实现自定义数据库密码加解密功能

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3
阅读更多...
使用C#删除Excel表格中的重复行数据的代码详解

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元
阅读更多...
使用Python实现网页表格转换为markdown

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中，我们经常需要从网页上复制表格数据，并将其转换成Markdown格式，以便在文档、邮件或
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2