用ReactJs编写的带斜线，行和列都分组的表格

最新推荐文章于 2025-04-08 10:03:01 发布
原创 最新推荐文章于 2025-04-08 10:03:01 发布 · 2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

NewUserTrackTable.js文件

/**
 * Created by Administrator on 2017/3/3 0003.
 */
import React, {Component} from "react"
import "./NewUserTrackTable.less"
var g_index = -1;
export default class NewUserTrackTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            "kpi": {
                "id": "01",
                "title": "发展用户"
            },
            "thData": [
                {
                    "year": "2015年",
                    "months": [
                        "1月",
                        "2月"
                    ]
                },
                {
                    "year": "2016年",
                    "months": [
                        "1月",
                        "2月",
                        "3月",
                        "4月"
                    ]
                },
                {
                    "year": "2017年",
                    "months": [
                        "1月",
                        "2月",
                        "3月"
                    ]
                }
            ],
            "tbodyData": [
                {
                    "year": "2015年",
                    "months": [
                        {
                            "month": "1月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        },
                        {
                            "month": "2月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        },
                        {
                            "month": "3月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        },
                        {
                            "month": "4月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        }
                    ]
                },
                {
                    "year": "2016年",
                    "months": [
                        {
                            "month": "1月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        },
                        {
                            "month": "2月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        },
                        {
                            "month": "3月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        },
                        {
                            "month": "4月",
                            "net_value": "220",
                            "obs_values": [
                                "111",
                                "222",
                                "333",
                                "333",
                                "3333",
                                "3333",
                                "444",
                                "3333",
                                "444"
                            ]
                        }
                    ]
                }
            ]
        }
    }

    getDepth = (data)=> {
        return data.months.length;
    }
    componentDidMount = ()=> {
        /*给表格画表头斜线*/
        // var myCanvas = document.getElementById("myCanvas-nutt");
        var myCanvas=this.refs.myCanvasNUTT;
        var width = myCanvas.width;
        var height = myCanvas.height;
        var ctx = myCanvas.getContext("2d");
        ctx.strokeStyle = "#ffffff";
        ctx.moveTo(0, 0);
        ctx.lineTo(width, height);
        ctx.stroke();


        /*根据表格列数给表格设置宽度*/
        var tableId=this.props.tableId;
        var _tds=this.state.tbodyData[0].months[0].obs_values.length+3;
        document.getElementById(tableId).width=_tds*100+"px";
    }
    getNormalTdStyle = (gindex)=> {
        return gindex % 2 == 0 ? "bg-white" : "bg-gray border-bottom";
    }
    getTableNode = (table, _net_year, data, depth, obsLastMontIndex)=> {
        if (data.length > 0) {
            data.map((netMonth, index)=> {
                g_index++;
                var obj = null;
                var _obs_values = netMonth.obs_values;
                if (_obs_values.length > 0) {
                    var normalTd = _obs_values.map((obsValue, index)=> {
                        return (
                            <td className={this.getNormalTdStyle(g_index, index) + " " + this.isShowBorderRight(index, obsLastMontIndex)}>{obsValue}</td>
                        );
                    })
                }
                if (index == 0) {

                    obj = <tr>
                        <td rowSpan={depth} className="kpi-bg">{_net_year}</td>
                        <td className="kpi-bg">{netMonth.month}</td>
                        <td className="kpi-bg">{netMonth.net_value}</td>
                        {normalTd}
                    </tr>

                }
                else {

                    obj = <tr>
                        <td className="kpi-bg">{netMonth.month}</td>
                        <td className="kpi-bg">{netMonth.net_value}</td>
                        {normalTd}
                    </tr>

                }
                if (obj) {
                    table.push(obj);
                }
            })
        }
    }
    getTable = (tree, data, obsLastMontIndex)=> {
        if (data.length > 0) {
            data.map((netYear, index)=> {
                var _data = netYear.months;
                var _depth = this.getDepth(netYear);
                var _net_year = netYear.year;
                this.getTableNode(tree, _net_year, _data, _depth, obsLastMontIndex);
            })
        }
    }
    /*
     * 该函数用来给相应的td或th添加右边的边框线
     * index改td或th的索引
     * obsMonth记录观察年月中每个年中最后一个月份所对应的索引。
     * */
    isShowBorderRight = (index, obsMonth)=> {
        return obsMonth.indexOf(index + 1) != -1 ? "border-right" : "";
    }
    render = ()=> {
        var table_id = this.props.tableId;
        var kpi = this.state.kpi;
        var thData = this.state.thData;
        var obs_month = thData[0].months;
        var tree = [];
        var _obs_lastmonth_index = [thData[0].months.length];//记录观察年月中每个年中最后一个月份所对应的索引。
        var tbodyData = this.state.tbodyData;
        if (thData.length > 0) {
            var obs_year_th = thData.map((obsYear, index)=> {
                var _depth = this.getDepth(obsYear);
                if (index > 0) {
                    _obs_lastmonth_index.push(_obs_lastmonth_index[_obs_lastmonth_index.length - 1] + obsYear.months.length);
                    Array.prototype.push.apply(obs_month, obsYear.months);
                }
                return (
                    <th colSpan={_depth} className="bg-gray border-right">
                        {obsYear.year}
                    </th>
                );
            })
        }
        if (obs_month.length > 0) {
            var obs_month_th = obs_month.map((obsMonth, index)=> {
                return (
                    <th className={this.isShowBorderRight(index, _obs_lastmonth_index) + " bg-gray border-bottom"}>
                        {obsMonth}
                    </th>
                );
            })
        }
        this.getTable(tree, tbodyData, _obs_lastmonth_index);
        return (
            <div className="new-user-track-table-box">
                <canvas ref="myCanvasNUTT" className="myCanvas"></canvas>
                <table id={table_id} className="new-user-track-table">
                    <thead>
                    <tr>
                        <th colSpan="2" rowSpan="2" className="kpi-bg">
                            <div style={{textAlign: "right", marginRight: "20px"}}>观察年月</div>
                            <div style={{textAlign: "left", marginLeft: "20px"}}>入网年月</div>
                        </th>
                        <th rowSpan="2" className="kpi-bg">{kpi.title}</th>
                        {obs_year_th}
                    </tr>
                    <tr>
                        {obs_month_th}
                    </tr>
                    </thead>
                    <tbody>
                    {tree}
                    </tbody>
                </table>
            </div>
        );
    }
}



NewUserTrackTable.less文件

.new-user-track-table-box{
  width: 100%;
  height: auto;
  overflow-x: scroll;
}
.new-user-track-table{
  margin-left: 10px;
  margin-top: -75px;
  height: auto;
}
.kpi-bg{
  text-align: center;
  width: 100px;
  height: 40px;
  color:#FFF7F6;
  border: solid 1px #AEBECF;
  background-color: #B7CDE5;
}
.bg-gray{
  text-align: center;
  width: 100px;
  height: 40px;
  background-color: #FAFAFA;
}
@border:solid 1px #cfcfcf;
.border-bottom{
  border-bottom: @border;
}
.bg-white{
  text-align: center;
  width: 100px;
  height: 40px;
  background-color: #ffffff;
  border-bottom: @border;
}
.border-right{
  border-right: @border;
}
.myCanvas{
  position: relative;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 80px;
}


表格截图如下
data layui table 排序_具有排序、筛选、分组、虚拟化、编辑功能的React表格组件...
weixin_39727934的博客
12-21 687
介绍今天要介绍的是一个在react生态中的一个表格组件——ka-table，正如标题，ka-table是一个具有排序、筛选、分组、虚拟化、编辑功能的React表格组件。可定制、可扩展、轻量级和免费的React Table组件！Githubhttps://github.com/komarovalexander/ka-table安装npmnpm install ka-table或者yarnyarn a...
如何从 0 到 1 实现一个支持排序、查找、分页的表格组件（React版）
前端达人
11-10 1192
我们每天有可能都在与数据列表打交道，比如列表的分页、查找列表（搜索查询）、按照指定的列升序降序排列这些需求，你可能再尝试使用 react-tableorAnt Design table...
ReactJs编写的带斜线，行和列都分组的表格
03-06
iOS开发16：分组的表格
weixin_34289454的博客
04-08 115
2019独角兽企业重金招聘Python工程师标准>>> ...
js 实现 表格的斜线
03-31
js 实现 表格的斜线! 值得下载看看!资源免费,大家分享!!
用js作表格的表头斜线
06-23
用js作表格的表头斜线 用js作表格的表头斜线
用javascript实现WORD里面的斜线表格
chinmo的收藏
04-15 2224
html xmlns:v="urn:schemas-microsoft-com:vml">style>v:* {Behavior: url(#default#VML);}body {margin: 0px; font-size: 12px;}style>body>table width="200" cellspacing="1" cellpadding="5" bgcolor="black" 
javascript 对表格的行和列都能加亮显示
10-30
在探讨如何使用JavaScript实现表格的行和列同时加亮显示时，我们可以从给定的文件内容中提取以下知识点： 1. **表格行列加亮显示原理**： - 加亮显示通常是指通过JavaScript改变表格单元格（td或th）的CSS样式，以...
让Excel活动单元格所在行和列都着上背景颜色的VBA代码.docx
09-27
"让Excel活动单元格所在行和列都着上背景颜色的VBA代码" knowledge point 1: Excel VBA 代码的应用 在 Excel 中，VBA 代码可以被用于实现各种自定义功能，例如本文所述的让活动单元格所在行和列都着上背景颜色。...
HTML页面table表格固定行和列
01-04
对于更复杂的情况，例如，当表格有交错的表头（例如，行和列都有表头）或者需要兼容多种浏览器时，可能需要借助JavaScript库，如jQuery的`floatThead`插件或纯JavaScript实现。 在实际开发中，还需要考虑到响应式...
React antd Table 实现单元格点击 表头斜线分组等功能
localhost
11-22 5636
react antd 单元格添加点击事件 自定义单元格
一个带有斜线的reactnative单元格组件
08-11
一个带有斜线的 react native 单元格组件
Grid分组特性
weixin_30393907的博客
10-24 101
Ext.onReady(function () { Ext.define('personInfo', { extend: 'Ext.data.Model', fields: ['name', 'salary','country'] }); ...
探索强大的React网格表格库：react-grid-table
gitblog_00051的博客
05-30 497
探索强大的React网格表格库：react-grid-table 在前端开发中，高效的数据展示是不可或缺的部分。今天，我们向您推荐一款基于CSS网格布局的React组件——react-grid-table，它是一款高度可配置和定制化的表格解决方案。 项目介绍 react-grid-table是一个模块化的表格组件，提供了丰富的功能，如异步支持、按列排序、列宽调整、搜索高亮显示等，旨在为您带来快速而...
React学习day13--antd组件：Grid栅格
weixin_46758732的博客
06-26 2482
Grid栅格 https://ant.design/components/grid-cn/ 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： 1）通过 row 在水平方向建立一组 column（简写 col）。 2）你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素。 3）栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 来创建。 4）如
React data grid 使用
MichaelAn的博客
04-26 3994
博客更新于 2024年，react-data-grid 已经是 7.x.x 大版本，可能配置项已经更新，建议参考官方文档进行调整，https://github.com/adazzle/react-data-grid。大部分的功能会集成在插件中，例如富表格编辑、右键菜单、拖拽功能、行分组管理等。主要功能：界面显示 Excel 预览，可以将一个对象或者 json 格式化成为界面。
react文字滚动插件_基于React的开源且强大的电子数据表格组件——React Data Grid...
weixin_39781186的博客
12-19 903
介绍React Data Grid是Github上一款开源的类Excel数据表格组件，内置编辑器，键盘导航，复制和粘贴等功能，Github上短时间内也已经多达3.4k+的star，这也说明了这样一个组件是备受关注和值得使用的，目前最新的稳定版本是5.0.4Githubhttps://github.com/adazzle/react-data-grid相关特性极快渲染速度利用智能窗口技术，以最小的延...
React中实现拖拽布局 react-grid-layout
weixin_58346650的博客
06-14 1765
在现代的Web应用中，灵活的布局和用户交互是非常重要的。拖拽布局允许用户通过拖动和调整大小来动态地改变页面布局，从而提供更好的用户体验。是一个强大的React库，它使得实现这种拖拽布局变得非常简单。本文将介绍如何在React项目中使用库来实现可定制的拖拽布局。通过本文的讲解，我们了解了如何在React项目中使用库来创建灵活的拖拽布局。这个库不仅易于使用，而且功能强大，可以满足各种复杂布局的需求。
在 React 中使用 grid 布局+gridTemplateColumns 实现瀑布流布局
最新发布
qq_43582112的博客
04-08 518
通过运用 CSS Grid 布局和属性，在 React 中实现瀑布流布局变得简单高效。这种布局方式能够提升用户体验，让网页内容更加美观和吸引人。你可以依据实际需求对样式和数据进行调整，以满足不同的项目要求。
二维表格 行和列都是动态查询出来的数据，如何保存和回显数据
03-13
<think>嗯，用户的问题是关于如何保存和回显从动态查询生成的二维表格数据。首先，我需要理解用户的需求。他们提到数据是动态查询生成的，行列都不固定，需要动态渲染，并且支持修改后的保存和回显。这可能涉及到前端和后端的协作。 根据用户提供的引用[1]，业务模型是动态表格，行列由后台数据提供，需要动态构建和可编辑。所以保存的时候，需要将表格的结构和数据一起保存。可能的结构包括表头（列名）和行数据，每个单元格的数据。回显的时候需要重新渲染这个结构，并且填入数据。 引用[2]提到在Vue3或Nuxt3中使用arco.design表格处理嵌套多维数组，合并单元格等。这可能涉及到前端如何将二维数组的数据渲染成表格，特别是在动态列的情况下，可能需要根据数据动态生成列配置。保存时，可能需要将表格数据转换为二维数组或对象数组，然后发送到后端存储。 引用[3]讨论了存储对象时使用String+JSON还是Hash。这里的数据结构可能更适合用JSON格式，因为表格的结构不固定，JSON可以灵活地表示动态的列和行。 那保存数据的时候，前端需要将表格的数据结构（比如列名）和内容整合成一个数据结构，比如包含columns和rows的对象，然后序列化为JSON保存到后端。后端可能需要存储这个JSON字符串，或者拆解到数据库中。如果是频繁查询和动态结构，可能用NoSQL数据库更合适，比如MongoDB，因为它的文档结构灵活。或者，如果使用关系型数据库，可能需要设计一个弹性表结构，比如一个表存储列定义，另一个表存储每个单元格的数据，关联行和列。 回显的时候，后端返回之前保存的数据结构，前端解析后动态渲染表格。比如，使用arco.design的表格组件，根据columns动态生成表头，rows生成表格行，并且绑定每个单元格的数据。编辑时，通过v-model或类似的双向绑定机制，实时更新数据，保存时提交整个结构。 难点可能在于动态表格的渲染和编辑绑定，尤其是当列不固定时，如何为每个单元格创建正确的数据绑定。另外，合并单元格的情况可能需要额外的配置，比如rowspan和colspan的处理，这在动态生成表格时比较复杂，需要根据数据内容动态计算合并方式。 总结步骤应该是：1. 数据结构设计，包含列信息和行数据。2. 前端动态渲染表格，支持编辑。3. 保存数据时序列化结构并存储。4. 回显时读取数据并重新渲染。需要确保前后端的数据格式一致，并且处理可能的合并单元格需求。</think>### 动态二维表数据保存与回显解决方案 #### 一、数据结构设计（核心步骤） 1. **动态表头**：使用数组存储列信息，例如： ```javascript columns: [ { key: 'x1', label: '字段1' }, { key: 'x2', label: '字段2' } ] ``` 2. **动态行数据**：使用二维数组或对象数组存储： ```javascript // 二维数组格式（推荐） tableData: [ ['值11', '值12'], ['值21', '值22'] ] // 或对象数组格式 tableData: [ { x1: '值11', x2: '值12' }, { x1: '值21', x2: '值22' } ] ``` 推荐使用二维数组格式以简化动态列处理[^1] #### 二、保存数据实现 1. **前端序列化**： ```javascript const savePayload = { columns: this.columns.map(col => col.key), data: this.tableData } // 发送给后端 axios.post('/api/save', JSON.stringify(savePayload)) ``` 2. **后端存储方案**： - **方案1**：使用`TEXT`类型字段存储JSON字符串（适合低频修改） ```sql CREATE TABLE dynamic_table ( id INT PRIMARY KEY, config JSON ) ``` - **方案2**：拆分存储（适合高频查询） ```sql -- 列定义表 CREATE TABLE columns ( table_id INT, col_key VARCHAR(50), col_order INT ) -- 数据存储表 CREATE TABLE cell_data ( row_id INT, col_key VARCHAR(50), value TEXT ) ``` #### 三、数据回显实现 1. **前端动态渲染**（以arco.design为例）： ```vue <a-table :data="tableData"> <a-table-column v-for="(col, index) in columns" :key="index" :title="col.label" > <template #cell="{ record }"> <a-input v-model="record[index]" /> </template> </a-table-column> </a-table> ``` 2. **嵌套数据处理**： ```javascript // 从接口获取数据后重组结构 axios.get('/api/data').then(res => { this.columns = res.data.columns.map(key => ({ key, label: key.toUpperCase() })) this.tableData = res.data.rows }) ``` #### 四、合并单元格处理 ```vue <a-table :span-method="spanMethod"> <!-- 列定义 --> </a-table> <script> // 合并策略函数 const spanMethod = ({ row, column }) => { if (column.dataIndex === 'x1') { return { rowspan: row.children?.length || 1 } } return { rowspan: 1 } } </script> ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值