当前位置：首页 > news >正文

websheet 之 table表格

news 来源：原创 2025/6/27 12:12:29

本控件只实现table的基础功能。
{.is-danger}

一、table基本使用

可以通过addTable函数动态增加table，代码如下：

   let tableColumn = [];let col = 1;tableColumn.push('测试' + (col++) + '列');tableColumn.push('测试' + (col++) + '列');tableColumn.push('测试' + (col++) + '列');tableColumn.push('测试' + (col++) + '列');activeSheet.addTable('测试1', 'C2:L12', tableColumn, 'TableStyleMedium2');

参数入下。

位置	样例	说明
1	‘测试1’	表格的名称，下面操作根据此名称
2	‘C2:L12’	表格的范围，包括表头
3	tableColumn	表格表头的名称数组
4	‘TableStyleMedium2’	表格展示的默认样式

本控件只支持 'TableStyleMedium2’和TableStyleMedium28样式，其他样式可以在xlsx模版内定义，加载模版使用或参考4.1设置table的样式。
{.is-warning}

在线代码
{.is-success}

最终结果：

在这里插入图片描述

二、设置table的数据源

2.1 二维数组数据

正常情况是后台返回给前端的json数据，这里利用字符串模拟了后台的数据，并把数据转换了employees数组对象。

  const jsonString = ` [{"employeeId": "EM001","name": "李强","gender": "男","age": 32,"department": "技术部","position": "高级软件工程师","hireDate": "2018-05-15","email": "zhangwei@company.com","phone": "+86 13812345678","salary": 28000,"status": "在职"},{"employeeId": "EM002","name": "王芳","gender": "女","age": 28,"department": "人力资源部","position": "招聘主管","hireDate": "2020-09-22","email": "wangfang@company.com","phone": "+86 13987654321","salary": 18000,"status": "在职"} ] ` ;const employees = JSON.parse(jsonString);

2.2 列名顺序设置数据源

默认模式下，根据二维数组数据的顺序来填充table内的数据。代码如下：

   activeSheet.SetTableData('测试1', employees);//数组对象，按照顺序这是表格数据，根据数组的长度确认表格长度

参数入下。

位置	样例	说明
1	‘测试1’	表格的名称
2	employees	二维数组，见2.1小结

2.2 通过列名称设置数据源

该模式下根据定义的名称对应到不同的列上，与展示的列名称不同，首先设置列名对照：

      let tableColumn2 = [];tableColumn2.push({ showName: '工号', codeName: 'employeeId' });tableColumn2.push({ showName: '姓名', codeName: 'name' });tableColumn2.push({ showName: '性别', codeName: 'gender' });tableColumn2.push({ showName: '年龄', codeName: 'age' });tableColumn2.push({ showName: '部门', codeName: 'department' });tableColumn2.push({ showName: '职称', codeName: 'position' });tableColumn2.push({ showName: '入职日期', codeName: 'hireDate' });tableColumn2.push({ showName: '电子邮件', codeName: 'email' });tableColumn2.push({ showName: '移动电话', codeName: 'phone' });tableColumn2.push({ showName: '薪资', codeName: 'salary' });tableColumn2.push({ showName: '状态', codeName: 'status' });activeSheet.SetTableColumn('测试1', tableColumn2);

再设置数据源。代码如下：

   activeSheet.SetTableData('测试1', employees);//数组对象，按照顺序这是表格数据，根据数组的长度确认表格长度

在线代码
{.is-success}

最终结果：

在这里插入图片描述

三、获取table的数据

3.1 无列名模式

该模式是默认的情况下，没有设置2.2 通过列名称设置数据源，获取数据。代码如下：

   let aaa=activeSheet.GetTableDate('测试1')

数据如下：

在这里插入图片描述

在线代码
{.is-success}

3.1 有列名模式

有列名模式是通过2.2 通过列名称设置数据源方式设置后获取数据。代码如下：

   let aaa=activeSheet.GetTableDate('测试1')

数据如下：

在这里插入图片描述

在线代码
{.is-success}

四、设置table的列编辑器

样例中设置了部门可以从下拉中选择，在开始时设置了’G3:G12’范围的选择，本控件会根据数据源的数据自动填充剩余的单元格为该编辑器。

   //下拉选择const jsb = document.createElement('option');jsb.value = '技术部';jsb.textContent = '技术部';const rlb = document.createElement('option');rlb.value = '人力资源部';rlb.textContent = '人力资源部';const glb = document.createElement('option');glb.value = '管理层';glb.textContent = '管理层';let optionsBm = [jsb, rlb, glb];activeSheet.setCellEditor('G3:G12', websheet.Model.SelectCell, optionsBm)

在线代码
{.is-success}

五、设置table的列格式

样例中设置表头字体为“隶书”，设置了薪金的自定义格式化等内容。同第四章，本控件会根据数据源的数据自动填充数据的格式。

     let newFontls = new websheet.Model.Font();newFontls.name = '隶书';newFontls.sz = 18;newFontls.color.rgb = '#FFFFFF';activeSheet.SetCellFont('C2', newFontls);let centeCenter = new websheet.Model.CellAlignment();centeCenter.horizontal = 'center';//垂直方面centeCenter.vertical = 'center';//水平方向activeSheet.SetCellAlignment('C2', centeCenter); // //自定义 -薪资格式化let numFmt200 = new websheet.Model.NumFmt();numFmt200.numFmtId = 200;numFmt200.formatCode = '#,##0.0000_);[Red]\(#,##0.0000\)';let rightCenter = new websheet.Model.CellAlignment();rightCenter.horizontal = 'right';//垂直方面rightCenter.vertical = 'center';//水平方向activeSheet.SetCellAlignment('L13', rightCenter);  activeSheet.SetCellNumFmts('L3:L13', numFmt200);

在线代码
{.is-success}

六、表格统计

样例中在表格下一行增加了年龄平均数和薪资的函数。同第四章，本控件会根据数据源的数据自动调整函数的计算范围。

   activeSheet.SetCellValue(13, 5, '平均年龄：');activeSheet.SetCellValue(13,6, '=AVERAGE(F3:F12)');activeSheet.SetCellValue(13, 11, '薪资总计：');activeSheet.SetCellValue(13, 12, '=SUM(L3:L12)');

在线代码
{.is-success}

七、自定义table的样式

待开发

websheet 之 table表格

本控件只实现table的基础功能。 {.is-danger} 一、table基本使用可以通过addTable函数动态增加table，代码如下： let tableColumn [];let col 1;tableColumn.push(测试 (col) 列);tableColumn.push(测试 (col) 列);tableColumn.push(测试 (col) …...

编程日记 2025/6/27 12:12:29

Python Cookbook-6.9 快速复制对象

任务为了使用 copy.copy，需要实现特殊方法__copy__。而且你的类的__init__比较耗时所以你希望能够绕过它并获得一个“空的”未初始化的类实例。解决方案下面的解决方案可同时适用于新风格和经典类: def empty_copy(obj):class Empty(obj.__class__):def __in…...

编程日记 2025/6/26 4:12:12

Linux NIO 原理深度解析：从内核到应用的高性能 I/O 之道

Linux 的非阻塞 I/O（Non-blocking I/O，NIO） 是构建高性能服务器的核心技术，其核心思想是通过事件驱动模型和零拷贝技术实现高并发、低延迟的网络通信。以下从底层机制到实际应用进行全面剖析。一、Linux I/O …...

编程日记 2025/6/27 12:00:50

Redis 集群切片全解析：四种常见技术的原理、优劣与应用

Redis 集群切片是将数据分散存储在多个 Redis 节点上的技术，以提高系统的可扩展性和性能。以下是一些常见的 Redis 集群切片方式： 1.哈希切片原理：通过对数据的键进行哈希运算，将哈希值映射到不同的切片（槽&#xf…...

编程日记 2025/6/27 11:09:07

html中margin的用法

在 HTML 页面布局中，margin 是 CSS 中用于设置元素与元素之间的外边距（即元素外部的空白区域） 的属性。它可以单独设置四个方向的边距：上（top）、右（right）、下（bottom…...

编程日记 2025/6/24 22:41:16

网络流量分析 | 流量分析基础

流量分析是网络安全领域的一个子领域，其主要重点是调查网络数据，以发现问题和异常情况。本文将涵盖网络安全和流量分析的基础知识。网络安全与网络中的数据网络安全的两个最关键概念就是：认证（Authentication）和授…...

编程日记 2025/6/25 15:46:10

语音合成之六端到端TTS模型的演进

端到端TTS模型的演进引言Tacotron：奠基之作FastSpeech：解决效率瓶颈VITS：实现高保真和富有表现力的语音SparkTTS：利用LLM实现高效可控的TTSCosyvoice：一种可扩展的多语种TTS方法端到端TTS模型的演进与未来方向引言 …...

编程日记 2025/6/26 13:47:47

文件的读取操作

#import time # 导入time 库 # 打开文件 fileopen("E:\Dasktape/python_test.txt","r",encoding"UTF-8")# 读取文件 print(f"读取文件的所有内容内容:{file.read()}\n") #\n是换行字符 print(f"读取10个字节的文件内容:{file.re…...

编程日记 2025/6/26 3:39:34

【Linux学习笔记】进程的fork创建 exit终止 wait等待

【Linux学习笔记】进程的fork创建 exit终止 wait等待 🔥个人主页：大白的编程日记 🔥专栏：Linux学习笔记文章目录【Linux学习笔记】进程的fork创建 exit终止 wait等待前言1.进程创建1.1 fork函数初识1.2fork函数返回值1.3写时拷…...

编程日记 2025/6/27 12:09:33

一种专用车辆智能配电模块的设计解析：技术革新与未来展望

关键词：智能配电模块、STM32、CAN总线、电子开关、新能源汽车引言：传统配电系统的痛点与智能化转型传统配电系统依赖继电器和保险丝，存在体积大、寿命短、智能化低等缺陷（如图1）。而新能源汽车和无人驾驶技术对配电…...

编程日记 2025/6/22 16:32:16

第TR5周：Transformer实战:文本分类

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 1.准备工作 1.1.加载数据 import torch import torch.nn as nn import torchvision import os,PIL,warnings import pandas as pd warnings.filterwarnings…...

编程日记 2025/6/26 16:53:26

Python爬虫（4）CSS核心机制：全面解析选择器分类、用法与实战应用

目录一、背景与重要性‌二、CSS选择器基础与分类‌2.1 什么是选择器？‌2.2 选择器分类与语法‌ 三、核心选择器详解与实战案例‌3.1 基础选择器：精准定位元素‌3.2 组合选择器：元素关系控制‌3.3 伪类与伪元素：动态与虚拟元素‌3…...

编程日记 2025/6/26 1:08:25

复杂地形越野机器人导航新突破！VERTIFORMER：数据高效多任务Transformer助力越野机器人移动导航

作者： Mohammad Nazeri 1 ^{1} 1, Anuj Pokhrel 1 ^{1} 1, Alexandyr Card 1 ^{1} 1, Aniket Datar 1 ^{1} 1, Garrett Warnell 2 , 3 ^{2,3} 2,3, Xuesu Xiao 1 ^{1} 1单位： 1 ^{1} 1乔治梅森大学计算机科学系， 2 ^{2} 2美国陆军研究实验室&…...

编程日记 2025/6/26 2:10:38

ROS 快速入门教程04

12.激光雷达工作原理激光雷达的作用是探照周围障碍物的距离，按照测量维度可以分为单线雷达和多线雷达。按照测量原理可以分为三角测距雷达和TOF雷达。按照工作方式可以分为固态雷达和机械旋转雷达。本次讲解以TOF雷达为例，雷达发射器发射激光遇到障碍…...

编程日记 2025/6/26 15:24:55

Node.js 开发项目

初始化 npm init## npm install 编辑packege.json 添加，以支持ES6的语法 "type": "module" 连接mysql示例 import db from ./db/ops_mysql.jsconst createTable async () > {const insert_data CREATE TABLE IF NOT EXISTS users (…...

编程日记 2025/6/23 1:35:37

Linux系统下的常用网络命令

1.ping命令作用：用来检测网络的连通情况和分析网络速度；根据域名得到服务器IP；根据ping返回的TTL值来判断对方所使用的操作系统及数据包经过路由器数量。参数：-c 数字：设定ping命令发出的消息包数量，如无…...

编程日记 2025/6/26 8:19:57

【器件专题1——IGBT第1讲】IGBT：电力电子领域的 “万能开关”，如何撑起新能源时代？

一、IGBT 是什么？重新认识这个 “低调的电力心脏” 你可能没听过 IGBT，但一定用过它驱动的设备：家里的变频空调、路上的电动汽车、屋顶的光伏逆变器，甚至高铁和电网的核心部件里，都藏着这个 “电力电子开关的瑞士军刀”…...

编程日记 2025/5/26 6:55:02

C++23 新特性深度落地与最佳实践

一、引言 C 作为一门历史悠久且广泛应用的编程语言，一直在不断发展和演进。C23 作为 C 标准的一个重要版本，引入了许多令人期待的新特性，这些特性不仅提升了代码的可读性、可维护性，还增强了程序的性能和安全性。本文将深入探讨 …...

编程日记 2025/6/25 20:40:57

26考研 | 王道 | 数据结构笔记博客总结

编程日记 2025/6/25 15:46:51

Bolsig+超详细使用教程

文章目录 Bolsig介绍Bolsig的使用 Bolsig介绍 BOLSIG 是一款用于求解弱电离气体中电子玻尔兹曼方程的免费计算程序，适用于均匀电场条件下的群体实验、气体放电及碰撞型低温等离子体研究。在此类环境中，电子分布函数呈现非麦克斯韦特性，其形态…...

编程日记 2025/6/26 23:23:49

基于线性LDA算法对鸢尾花数据集进行分类

基于线性LDA算法对鸢尾花数据集进行分类 1、效果 2、流程 1、加载数据集 2、划分训练集、测试集 3、创建模型 4、训练模型 5、使用LDA算法 6、画图3、示例代码 # 基于线性LDA算法对鸢尾花数据集进行分类# 基于线性LDA算法对鸢尾花数据集进行分类 import numpy as np import …...

编程日记 2025/6/26 7:52:05

C#高级语法--接口

先引用一些通俗一点的话语说明 1. 接口就像“插座标准”（解耦） 🧩 场景：你家的手机充电器（USB-C、Lightning）必须插进匹配的插座才能充电。问题：如果每个手机品牌插座都不一样，你换手机就得换充电器，太麻烦了！💡 接口的作用：定义一个通用的充电口标准（比如U…...

编程日记 2025/6/25 9:32:27

软测面经（私）

测试流程分析需求——>制定测试计划——>设计测试用例——>执行测试——>编写测试报告黑盒测试等价类划分、边界值分析法、猜错法、随机数法、因果图。白盒测试代码检查法、程序变异、静态结构分析法、静态质量度量法、符号测试法、逻辑覆盖法、域测试、…...

编程日记 2025/6/20 13:28:34

线程函数库

pthread_create函数 pthread_create 是 POSIX 线程库（pthread）中的一个函数，用于创建一个新的线程。头文件 #include <pthread.h> 函数原型 int pthread_create(pthread_t *thread, const pthread_attr_t *attr,void *(*s…...

编程日记 2025/5/24 6:41:50

数据结构初阶：排序

概述：本篇博客主要介绍关于排序的算法。目录 1.排序概念及应用 1.1 概念 1.2 运用 1.3 常见的排序算法 2. 实现常见排序算法 2.1 插入排序 2.1.1 直接插入排序 2.1.2 希尔排序 2.2 选择排序 2.2.1 直接选择排序 2.2.2 堆排序 2.3 交换排序 2.3.1 冒泡排序…...

编程日记 2025/6/24 14:49:06

openwrt查询网关的命令

方法一：route -n 方法二：ip route show...

编程日记 2025/5/26 1:42:24

优化非线性复杂系统的参数

非线性项组合的系统对于系统中的每一个复杂拟合，即每一个残差函数，都能表示为非线性方程的趋势，例如较为复杂的系统函数组， from optimtool.base import sp, np x sp.symbols("x1:5") res1 0.5*x[0] 0.2*x[1] 1.…...

编程日记 2025/6/24 7:56:39

【QQMusic项目界面开发复习笔记】第二章

🌹 作者: 云小逸 🤟 个人主页: 云小逸的主页 🤟 motto: 要敢于一个人默默的面对自己，强大自己才是核心。不要等到什么都没有了，才下定决心去做。种一颗树，最好的时间是十年前，其次就是现在&…...

编程日记 2025/5/20 7:49:21

并发编程【深度解剖】

并发介绍谈到并发，随之而来的就是那几个问题。并发并行线程进程注意！！！本篇文章更多用诙谐的语调讲解，为保证易于理解，不够官方正式，所以可以结合AI读本篇文章，并且本文是以 g…...

编程日记 2025/6/20 8:42:55

前端如何连接tcp 服务，接收数据

在传统的浏览器前端环境中，由于浏览器的同源策略和安全限制，无法直接建立 TCP 连接。不过，可以通过 WebSocket 或者使用 WebRTC 来间接实现与 TCP 服务的通信，另外在 Node.js 环境中可以直接使用 net 模块建立 TCP 连接。下面分别…...

编程日记 2025/5/27 17:36:21

用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。

一、思路概要和知识回顾 1.思路概要 ①中缀表达式计算： 需要处理运算符的优先级，可能需要用到栈结构。 ❗❗如何将中缀表达式转换为后缀表达式？或者直接计算？ 通常，中缀转后缀（逆波兰式）再…...

编程日记 2025/6/25 1:23:38

使用 Pandas 进行多格式数据整合：从 Excel、JSON 到 HTML 的处理实战

前言在数据处理与分析的实际场景中，我们经常需要整合不同格式的数据，例如 Excel 表格、JSON 配置文件、HTML 报表等。本文以一个具体任务（蓝桥杯模拟练习题）为例，详细讲解如何使用 Python 的 Pandas 库结合其他工具&…...

编程日记 2025/6/21 1:21:17

常见游戏引擎介绍与对比

Unreal Engine (UE4/UE5) 主语言：C Unreal Engine 主要使用 C 作为开发语言。C 提供了高性能的底层控制，适用于需要精细调优的 AAA 级游戏。C 在 Unreal 中用于开发核心游戏逻辑、物理引擎等性能要求较高的部分。脚本语言：蓝图（B…...

编程日记 2025/6/26 17:32:07

第十一天主菜单/设置界面过场动画（Timeline）成就系统（Steam/本地）多语言支持

前言对于刚接触Unity的新手开发者来说，构建完整的游戏系统往往充满挑战。本文将手把手教你实现游戏开发中最常见的四大核心系统：主菜单界面、过场动画、成就系统和多语言支持。每个模块都将结合完整代码示例，使用Unity 2022 LTS版本进行演示…...

编程日记 2025/6/27 2:22:45

vue3 使用 vite 管理多个项目，实现各子项目独立运行，独立打包

场景： 之前写过一篇 vite vue2 的配置，但是现在项目使用 vue3 较多，再更新一下 vue脚手架初始化之后的项目，每个项目都是独立的，导致项目多了之后，node依赖包过多，占用内存较多。想实现的效果…...

编程日记 2025/6/24 15:19:45

k8s(9) — zookeeper集群部署(亲和性、污点与容忍测试)

一、部署思路 1、前期设想 zookeeper集群至少需要运行3个pod集群才能够正常运行，考虑到节点会有故障的风险这个3个pod最好分别运行在３个不同的节点上(为了实现这一需要用到亲和性和反亲和性概念)，在部署的时候对zookeeper运行的pod打标签加…...

编程日记 2025/6/27 7:12:06

Linux操作系统复习

Linux操作系统复习一. Linux的权限和shell原理1. Linux从广义上讲是什么从狭义上讲是什么？2. shell是什么？3. 为什么要设置一个shell外壳而不是直接和linux 内核沟通4. shell的原理是什么5. Linux中权限的概念6. 如何提升当前操作的权限7. 文件访问者的…...

编程日记 2025/5/18 22:40:07

深入解析 Linux 中动静态库的加载机制：从原理到实践

引言在 Linux 开发中，动静态库是代码复用的核心工具。静态库（.a）和动态库（.so）的加载方式差异显著，直接影响程序的性能、灵活性和维护性。本文将深入剖析两者的加载机制，结合实例演示和底层原…...

编程日记 2025/6/27 7:43:41

总账主数据——Part 2 科目-1

本文主要介绍在S4 HANA OP中总账主数据的后台配置及前台操作。目录 1. 准备 1.1 科目表的定义(OB13) 1.2 给公司代码分配科目表(OB62) 1.3 定义科目组(OBD4) 1.4 定义留存收益科目(OB53) 1.5 维护科目表层“文本标识” (OBT6) 1.6 维护公司代码层“文本标识” (OBT…...

编程日记 2025/6/20 9:54:24

借助内核逻辑锁pagecache到内存

一、背景内存管理是一个永恒的主题，尤其在内存紧张触发内存回收的时候。系统在通过磁盘获取磁盘上的文件的内容时，若不开启O_DIRECT方式进行读写，磁盘上的任何东西都会被缓存到系统里，我们称之为page cache。可以想象&#xff0…...

编程日记 2025/6/22 16:00:02

✨ Apifox：这玩意儿是接口界的“瑞士军刀”吧！[特殊字符][特殊字符]

——全网最皮最全测评，打工人看了直呼“真香” 📢 友情提醒还在用 Postman 测接口、Swagger 写文档、Mock.js 造假数据、脑细胞搞团队协作？ 停！ 你仿佛在玩《工具人环游记》，而隔壁同事已经用 Apifox 「一杆清台」了…...

编程日记 2025/6/25 13:59:35

《普通逻辑》学习记录——性质命题及其推理

目录一、性质命题概述二、性质命题的种类 2.1、性质命题按质的分类 2.2、性质命题按量的分类 2.3、性质命题按质和量结合的分类 2.4、性质命题的基本形式归纳三、四种命题的真假关系 3.1、性质命题与对象关系 3.2、四种命题的真假判定 3.3、四种命题的对当关系四、四种命题…...

编程日记 2025/6/2 5:04:45

设备接入与APP（应用程序）接入华为云iotDA平台的路径元素有哪些不同？

目录壹、设备接入华为云iotDA 🏢 形象比喻：设备员工，IoTDA 平台安保森严的总部大楼一、📍 平台接入地址总部大楼地址二、🧾 接入凭证出入证 / 门禁卡 / 工牌 1. 设备密钥或证书 2. 预置接入凭证密钥&a…...

编程日记 2025/6/22 1:38:21

【git#4】分支管理 -- 知识补充

一、bug 分支假如我们现在正在 dev2 分支上进行开发，开发到一半，突然发现 master 分支上面有 bug，需要解决。在Git中，每个 bug 都可以通过一个新的临时分支来修复，修复后，合并分支，然后将临…...

编程日记 2025/5/26 1:02:27

AXOP34062: 40V双通道运算放大器

AXOP34062是一款通用型高压双通道运算放大器，产品的工作电压为2.5V至40V，具有25MHz的带宽，压摆率为10V/μs，静态电流为650A。较高的耐压和带宽使其可以胜任绝大多数的高压应用场景。主要特性轨到轨的输入输出范围低输入失调电…...

编程日记 2025/6/23 18:08:59

OpenCv高阶（十）——光流估计

文章目录前言一、光流估计二、使用步骤1、导库读取视频、随机初始化颜色2、初始化光流跟踪3、视频帧处理循环4、光流计算与可视化5、循环控制与资源释放完整代码总结前言在计算机视觉领域，光流估计是捕捉图像序列中像素点运动信息的核心技术。它描述了图像中每…...

编程日记 2025/6/24 9:26:06

BS客户端的单点登录

1、参数类似于“XXXXX://?userIdsystem&time1696830378038&token38a8ea526537766f01ded33a6cdfa5bd” 2、在config里加一个LoginSecret参数可随意指定一个字符串 3、BS登录代码里会对“LoginSecret的参数值用户ID时间戳”进行MD5加密形成token，与传过来的…...

编程日记 2025/6/25 23:49:48