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

【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM

在这里插入图片描述

博主:_LJaXi
专栏: React | 前端框架

主要是一些表格DOM操作,数据更换 个人向

HTML

<!DOCTYPE html>
<html lang="en">
<link>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>生产监控</title>
<link rel="stylesheet" href="https://unpkg.com/antd@3.9.3/dist/antd.min.css" />
<link rel="stylesheet" href="/css/jiankongindex.css">
</link>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://unpkg.com/antd@3.9.3/dist/antd.min.js"></script>
<script src="/js/jquery.1.10.min.js"></script>
<script src="/js/appjs/shengchan/changeShifts/contant.js"></script></head><body><div id="root"></div><script th:inline="javascript" type="text/babel">let collect = [[${collect}]];let changeShifts = [[${changeShifts}]];const ProductionMonitoring = () => {'use strict';let disposeArray = [];const { useState, useEffect, useRef } = React;const [someDay, setSomeDay] = useState(new Date());const [startWorkshop, setStartWorkshop] = useState('');const [maintenanceWorkshop, setMaintenanceWorkshop] = useState('');const [footerDomWidth, setFooterDomWidth] = useState('');const tableDOM = useRef(null);const [selectValue, setSetlectValue] = useState('');const [date, setDate] = useState('');const [searchData, setSearchData] = useState([]);useEffect(() => {setStartWorkshop(changeShifts?.yproductionlog);setMaintenanceWorkshop(changeShifts?.wproductionlog);}, []);useEffect(() => {curstomFontColor();if (tableDOM.current) {countFootWidth()}windowResizeTableFooterWidth()const rableBodyContainer = tableDOM.current.getPopupContainer().querySelector('.ant-table-tbody').children;for (let i = 0; i < rableBodyContainer.length; i++) {const trItem = rableBodyContainer[i];const children = trItem.children;for (let j = 0; j < children.length; j++) {const childElement = children[j];if (j === 1 || j === 2 || j === 4 || j === 5) {childElement.style.backgroundColor = 'rgb(7,33,75)'}}}}, [searchData, setSearchData]);const isToday = (date) => {const today = new Date();return today.getFullYear() === date.getFullYear() &&today.getMonth() === date.getMonth() &&today.getDate() === date.getDate()};const replaceString = (str) => {const lastChar = str.slice(-1);switch (lastChar) {case "0":return str.replace(lastChar, ": 停止");case "1":return str.replace(lastChar, ": 运行");case "2":return str.replace(lastChar, ": 故障");default:return str;}};const concatArray = (arr_one, arr_two) => {let concatedArray = [];for (let i = 0; i < arr_one.length; i++) {if (arr_one[i].name1 || arr_one[i].name2) {for (let j = 0; j < arr_one[i].name1.length; j++) {arr_one[i].name1[j] = replaceString(arr_one[i].name1[j])}for (let j = 0; j < arr_one[i].name2.length; j++) {arr_one[i].name2[j] = replaceString(arr_one[i].name2[j])}}}disposeArray = arr_one;for (let i = 0; i < 5; i++) {let startIndexOne = JSON.parse(JSON.stringify(disposeArray[i]));let startIndexTwo = JSON.parse(JSON.stringify(arr_two[i]));concatedArray.push({ ...startIndexOne, ...startIndexTwo });}for (let i = 0; i < concatedArray.length; i++) {const concatStringOne = concatedArray[i].name1.reduce((acc, curr, index) => {return acc + curr + (index < concatedArray[i].name1.length - 1 ? '、' : '');}, '');const concatStringTwo = concatedArray[i].name2.reduce((acc, curr, index) => {return acc + curr + (index < concatedArray[i].name2.length - 1 ? '、' : '');}, '');concatedArray[i].name1 = concatStringOne;concatedArray[i].name2 = concatStringTwo;}return concatedArray;};const countFootWidth = () => {const footDomWidth = tableDOM.current.getPopupContainer().querySelector('.ant-table-row').children[0].offsetWidthsetFooterDomWidth(footDomWidth);};const windowResizeTableFooterWidth = () => {const handleResize = () => {countFootWidth();};window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);};};const selectChange = (e) => {setSetlectValue(e)};const dateChange = (e) => {let newDate = new Date(e._d);setSomeDay(newDate);let selectDateValue = newDate.getFullYear() + '-' + ((newDate.getMonth()+ 1) < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1) + '-' + (newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate());setDate(selectDateValue)};const submitTable = () => {if (!selectValue) return alert("类型为必填项");if (!date) return alert("时间为必填项");$.ajax({type: "POST",url: "/shengchan/changeShifts/update",data: JSON.stringify({ id: changeShifts.id, yproductionlog: startWorkshop, wproductionlog: maintenanceWorkshop }),contentType: 'application/json;charset=utf-8',})};const onSearch = async () => {await $.ajax({type: "POST",url: "/shengchan/changeShifts/search",data: JSON.stringify({id: changeShifts.id, datadate: date, atype: selectValue}),contentType : 'application/json;charset=utf-8',}).then(res => {if ( Array.isArray(res?.collect)) {const beforeClearArray = edTableColumnInnerHtml(edTableColumnInnerHtml(concatArray(res.collect, TABLE_DATA), 1), 2).slice();setSearchData([{a: ''}]);setSearchData(beforeClearArray);}});};const curstomFontColor = () => {let tableColumnDOM = tableDOM.current?.getPopupContainer()?.querySelectorAll('td');tableColumnDOM.forEach((node) => {let handleData = handlerNodeStr(node.innerHTML.slice("、"));node.innerHTML = handleData;});};const handlerNodeStr = (node) => {return node.replace(/&lt;/g, "<").replace(/&gt;/g, ">");};const edTableColumnInnerHtml = (d, index) => {for (let i = 0; i < d.length; i++) {let splitArr = d[i][(`name${index}`)].split("、");for (let j = 0; j < splitArr.length; j++) {if (splitArr[j].slice(-2) === "运行") {splitArr[j] = splitArr[j].replace(splitArr[j].slice(-2),  `<span style="color: green">${splitArr[j].slice(-2)}</span>`)} else if (splitArr[j].slice(-2) === "故障") {splitArr[j] = splitArr[j].replace(splitArr[j].slice(-2),  `<span style="color: orange">${splitArr[j].slice(-2)}</span>`)} else if (splitArr[j].slice(-2) === "停止") {splitArr[j] = splitArr[j].replace(splitArr[j].slice(-2),  `<span style="color: red">${splitArr[j].slice(-2)}</span>`)}}d[i][`name${index}`] = splitArr.join("、");}return d;};const FootDom = () => {return (<><div className="footer-container"><divclassName="footer-item"style={{width: `${footerDomWidth}px`,borderRight: '1px solid #eee'}}><span className="content">{FOOTER_OPERATION}</span></div><div style={{ flex: 1 }}><antd.Input value={startWorkshop} className="w1 h1" placeholder="请输入" onChange={(e) => setStartWorkshop(e.target.value)} /></div></div><div className="footer-container"><divclassName="footer-item"style={{width: `${footerDomWidth}px`,borderRight: '1px solid #eee'}}><span className="content">{FOOTER_MAINTENANCE}</span></div><div style={{ flex: 1 }}><antd.Input value={maintenanceWorkshop} className="w1 h1" placeholder="请输入" onChange={(e) => setMaintenanceWorkshop(e.target.value)} /></div></div></>)};return (<div className="table-container"><antd.Tableref={tableDOM}pagination={false}columns={COLUMNS}dataSource={searchData.length > 0 ? searchData : (edTableColumnInnerHtml(edTableColumnInnerHtml(concatArray(collect, TABLE_DATA), 1), 2))}footer={() => FootDom()}/><div className="operate-table"><div className="operate-item"><antd.DatePicker className="i1" onChange={dateChange} placeholder="选择日期" /><antd.Select value={selectValue} onChange={selectChange} className="w1 i1"><Option value="白班">白班</Option><Option value="夜班">夜班</Option></antd.Select><antd.Button className="w1 i1" type="primary" size="large" onClick={onSearch}>< img src="/img/search.png" className="icon" />搜索</antd.Button>{isToday(someDay) && (<antd.Button className="w1 i1" type="primary" size="large" onClick={submitTable}>< img src="/img/submit.png" className="icon" />提交</antd.Button>)}</div></div></div>)};const container = document.getElementById('root');ReactDOM.render(<ProductionMonitoring />, container)</script>
</body></html>

js

const COLUMNS = [{title: '工艺段',dataIndex: 'gyd1',key: 'gyd1',align: 'center'},{title: '项目',dataIndex: 'xm1',key: 'xm1',align: 'center'},{title: '记录',dataIndex: 'name1',key: 'name1',align: 'center'},{title: '工艺段',dataIndex: 'gyd2',key: 'gyd2',align: 'center'},{title: '项目',dataIndex: 'xm2',key: 'xm2',align: 'center'},{title: '记录',dataIndex: 'name2',key: 'name2',align: 'center'}
]const TABLE_DATA = [{key: '1',gyd1: '一二期脱水机房',xm1: '一二期脱水机、状态',// name1: '',gyd2: '聚铁加药间',xm2: '聚铁加药间、状态',// name2: ''},{key: '2',gyd1: '聚铁加药间',xm1: '聚铁加药间、状态',// name1: '',gyd2: '一二期浓缩池',xm2: '剩余污泥泵、状态',// name2: ''},{key: '3',gyd1: '消化池',xm1: '阀门、状态',// name1: '',gyd2: '三期浓缩池',xm2: '排泥泵、状态',// name2: ''},{key: '4',gyd1: '污泥浓缩机',xm1: '污泥浓缩机、状态',// name1: '',gyd2: '一、二期剩余污泥泵',xm2: '一、二期剩余污泥泵、状态',// name2: ''},{key: '5',gyd1: '污泥料仓液位',xm1: '污泥料仓液位、状态',// name1: '',gyd2: '脱水机房',xm2: '柱塞泵、皮带机、螺旋、状态',// name2: ''}
]const FOOTER_OPERATION = '运行车间、交班内容'
const FOOTER_MAINTENANCE = '维护车间、交班内容'

css

.ant-table-thead > tr > th {color: #aadbfa;background-color: #2b5689;border-right: 1px solid #eee;border-bottom: 1px solid #eee;
}
.ant-table-tbody > tr > td {height: 80px;color: #aadbfa;background-color: #2b5689;border-right: 1px solid #eee;border-bottom: 1px solid #eee;
}
.footer-container {display: flex;min-height: 80px;color: #aadbfa;border-right: 1px solid #eee;border-bottom: 1px solid #eee;background-color: #2b5689;
}.ant-input {color: #fff;background-color: rgb(7,33,75);
}.footer-container .footer-item {position: relative;max-height: 100px;text-align: center;
}.footer-container .footer-item .content {display: inline-block;width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.ant-table-footer {padding: 0 !important;border-top: 0 !important;
}
.table-container {display: flex;
}
.table-container .ant-table-wrapper {flex: 1;
}
.table-container .operate-table {padding: 8px;min-width: 150px;max-width: 150px;color: #aadbfa;background-color: #2b5689;border-right: 1px solid #eee;border-bottom: 1px solid #eee;
}.operate-item {/*display: flex;*//*flex-direction: column;*//*justify-content: space-between;*/height: 170px;
}
.table-container .operate-table .w1 {width: 100%;
}
.h1 {height: 100%;
}
.i1 {margin: 5px 0 5px 0;
}
.table-container .operate-table .icon {width: 20px;height: 20px;margin: 0 10px 0 0;
}

相关文章:

【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM

博主&#xff1a;_LJaXi 专栏&#xff1a; React | 前端框架 主要是一些表格DOM操作&#xff0c;数据更换 个人向 HTML <!DOCTYPE html> <html lang"en"> <link> <meta charset"UTF-8" /> <meta name"viewport" con…...

【面试经典150 | 哈希表】最长连续序列

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;哈希表 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等内…...

如何构建安全的App网络通信?

前言 说到安全肯定逃不开数据的加解密&#xff0c;数据本地存储大多用对称加解密来实现&#xff0c;那网络传输数据的时候是不是也用对称加解密来实现&#xff1f;没错&#xff0c;常规网络通信时&#xff0c;大部分网络传输过程中基本也是用对称加解密来实现的&#xff0c;毕竟…...

Chrome插件精选 — 网页截图插件

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件记录下比较好用的一款或几款&#xff0c;便于节省尝试的时间和精力。 捕捉网页截图 - FireShot 下载地址 (访问密码: 8276) Fireshot是一款浏览器插件&#xff0c…...

react+antd封装表格组件2.0

reactantd封装表格组件2.0 1.0版本 仅仅封装组件&#xff0c;不涉及方法需要掌握知识点useImperativeHandle 组件代码引用 1.0版本 仅仅封装组件&#xff0c;不涉及方法 1.0 仅封装组件 此方法把所用方法集体封装&#xff0c;以后就可以无脑开发拉&#xff01; 只需传入路径&…...

互联网Java工程师面试题·Java 并发编程篇·第八弹

目录 33、Java 死锁以及如何避免&#xff1f; 34、死锁的原因 35、怎么唤醒一个阻塞的线程 36、不可变对象对多线程有什么帮助 37、什么是多线程的上下文切换 38、如果你提交任务时&#xff0c;线程池队列已满&#xff0c;这时会发生什么这里区分一下&#xff1a; 39、J…...

21面向对象描述器

目录 1、什么是描述器&#xff1f; 1、原始的代码可以理解成为这样&#xff1a; 2、增加解释器可以改成如下&#xff0c;解释器就是集增删改查为一体的一个小的property 有一点需要注意的地方是&#xff1a;property里面内置的参数不是get_age()就是不用调用。 3、装饰器可…...

高校教务系统登录页面JS分析——皖西学院

高校教务系统密码加密逻辑及JS逆向 本文将介绍皖西学院教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文&#xff0c;你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文仅供交流学习&#xff0c;勿用于非法用途。 一、密…...

单片机综合小项目

一、单片机做项目常识 1.行业常识 2.方案选型 3.此项目定位和思路 二、单片机的小项目介绍 1.项目名称&#xff1a;基于51单片机的温度报警器 &#xff08;1&#xff09;主控&#xff1a;stc51&#xff1b; &#xff08;2&#xff09;编程语言&#xff1a;C语言 &#xff08;…...

docker下的onlyoffice安装(for seafile)

docker镜像拉取 # 拉取 onlyoffice 镜像docker pull onlyoffice/documentserver 创建所需目录 # 创建几个目录 用于 onlyoffice 的数据卷cd /opt# 建议与 seafile 容器都放在 /opt 目录方便管理mkdir seafile-onlyofficecd seafile-onlyofficemkdir logmkdir datamkdir libmkd…...

1 两数之和

解题思路&#xff1a; \qquad 对每个数nums[i]&#xff0c;仅需在数组中搜索target-nums[i]是否存在。 优化思路&#xff1a; \qquad 首先能想到&#xff0c;利用哈希表O(1)查询target-nums[i]。 \qquad 建立map<int, vector<int>>的表能够处理重复元素&#x…...

NewStarCTF2023week2-Unserialize?

代码审计&#xff1a; 定义了一个eval类&#xff0c;该类下有一个私有变量cmd和公有成员函数destruct()&#xff0c;该函数在对象的所有引用都被删除或类被销毁时会自动调用&#xff1b; 调用该函数则会执行一个正则表达式进行正则匹配&#xff0c;过滤掉了一些常用命令和bas…...

OpenMesh 最优选点策略

文章目录 一、简介二、实现代码三、实现效果参考文献一、简介 继续沿着之前的思路:OpenMesh 网格顶点Quadric误差计算,有时候,无论是网格简化或是网格平滑,总会涉及到添加一个新的顶点的问题,那么新顶点应该怎么生成呢?以网格的简化操作为例,假设我们要合并两个顶点,也…...

服务器内存总量和内存条有差异是什么问题 103.239.244.X

服务器内存总量和内存条上标注的容量可能会存在一些差异&#xff0c;这是由于以下几个原因&#xff1a; 部分内存被保留给系统和其他硬件设备&#xff1a;在服务器中&#xff0c;一部分内存可能被保留给系统和其他硬件设备&#xff0c;比如显卡、网卡、RAID卡等。这些设备需要一…...

WPF DataGrid详细列表手动显示与隐藏

设置显示序号与折叠显示样式 <DataTemplate x:Key"dtNum"><Button BorderBrush"Transparent" Style"{x:Null}" Click"BtnRowDetail_ShowHideClick" FontSize"16" Background"Transparent"><Stack…...

Compose 组件 - 分页器 HorizontalPager、VerticalPager

一、概念 类似于 ViewPager&#xff0c;1.4 版本之前需要借助 accompanis 库&#xff0c;底层基于 LazyColumn、LazyRow 实现&#xff0c;在使用上也基本相同。默认情况下 HorizontalPager 占据屏幕的整个宽度&#xff0c;VerticalPager 会占据整个高度。 fun HorizontalPager(…...

Web3 招聘 | Bitget、MyShell、imToken、Arweave 多项目招聘中

「Web3 招聘」是 TinTinLand 为 Web3 项目和求职者创建的一个招聘信息汇集专栏。本栏目将持续更新区块链行业招聘信息&#xff0c;满足不同求职者与项目方的多样需求。欢迎各项目方联系 TinTinLand 发布职位需求&#xff0c;欢迎求职者关注 TinTinLand 获取最新招聘信息。 此外…...

通过HTTP发送大量数据的三种方法

在网络的早期时期&#xff0c;人们发送的文件大小仅为几KB。到了2023年&#xff0c;我们享受着高分辨率的MB级别图像&#xff0c;并在几GB的4K&#xff08;即将是8K&#xff09;视频中观看。 即使有良好的互联网连接&#xff0c;下载一个5GB的文件仍然需要一些时间。如果你拥有…...

【MySQL】索引和事物

目录 ♫索引 ♪什么是索引 ♪索引的数据结构 ♪索引的使用 ♫事务 ♪什么是事务 ♪事务的特性 ♪事务的使用 ♫索引 ♪什么是索引 索引是存储在磁盘上的一个数据结构&#xff0c;通过索引可以快速地定位到存储在磁盘上的数据。 索引在提高查询速度的同时&#xff0c;还提…...

win11下的VS2022+QT6+VTK9.2+PCL1.13.1联合开发环境配置及踩坑记录

准备工作&#xff1a; 安装VS2022&#xff1a;这个比较简单&#xff0c;网上随便找个教程就行 安装QT并为VS2022添加QT Creater插件&#xff1a;VS2022配置Qt6_vs2022 qt6-CSDN博客 安装PCL&#xff1a;vs2022配置pcl1.13.1_pcl配置-CSDN博客 安装PCL过程中本身也会安装VTK&…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...