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

最新推荐文章于 2024-08-25 08:33:10 发布
最新推荐文章于 2024-08-25 08:33:10 发布
阅读量2k 收藏 3
点赞数 2
分类专栏： ReactJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wp12345666666/article/details/60578747
版权

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;
}


表格截图如下
拇指风云
关注
专栏目录
ReactJs编写的带斜线，行和列都分组的表格
03-06
iOS开发16：分组的表格
weixin_34289454的博客
04-08 86
2019独角兽企业重金招聘Python工程师标准>>> ...
推荐文章：ReactGrid - 打造高效数据处理体验
最新发布
gitblog_00324的博客
08-25 587
推荐文章：ReactGrid - 打造高效数据处理体验 reactgridAdd spreadsheet-like behavior to your React app项目地址:https://gitcode.com/gh_mirrors/re/reactgrid 在当今快速发展的Web应用程序世界中，高效地展示和管理大量数据变得至关重要。为此，我们带来了一个强大的开源宝藏 —— ReactGr...
js 实现 表格的斜线
03-31
js 实现 表格的斜线! 值得下载看看!资源免费,大家分享!!
用js作表格的表头斜线
06-23
用js作表格的表头斜线 用js作表格的表头斜线
用javascript实现WORD里面的斜线表格
chinmo的收藏
04-15 2180
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 5173
react antd 单元格添加点击事件 自定义单元格
data layui table 排序_具有排序、筛选、分组、虚拟化、编辑功能的React表格组件...
weixin_39727934的博客
12-21 623
介绍今天要介绍的是一个在react生态中的一个表格组件——ka-table，正如标题，ka-table是一个具有排序、筛选、分组、虚拟化、编辑功能的React表格组件。可定制、可扩展、轻量级和免费的React Table组件！Githubhttps://github.com/komarovalexander/ka-table安装npmnpm install ka-table或者yarnyarn a...
一个带有斜线的reactnative单元格组件
08-11
一个带有斜线的 react native 单元格组件
reactgrid:React表
06-15
React网格 使用 React 创建表。 完全受到启发 依赖关系 React 下划线 在制品 在 v1.0.0 之前不要在生产中使用 示例用法 服务器端： var React = require ( 'react' ) ; var Reactgrid = require ( 'reactgrid' ) ; var columns = [ { label : 'ID' , name : 'id' , cell : 'integer' } , { label : 'Name' , name : 'name' , cell : 'string' } , { label : 'Created' , name : 'created' , cell : 'datetime' } , { l
react-ReactSpreadsheetGrid用于React类似于Excel的网格组件
08-15
用于React类似于Excel的网格组件，具有自定义单元格编辑器，高性能滚动和可调整大小的列
如何从 0 到 1 实现一个支持排序、查找、分页的表格组件（React版）
前端达人
11-10 1101
我们每天有可能都在与数据列表打交道，比如列表的分页、查找列表（搜索查询）、按照指定的列升序降序排列这些需求，你可能再尝试使用 react-tableorAnt Design table...
Grid分组特性
weixin_30393907的博客
10-24 75
Ext.onReady(function () { Ext.define('personInfo', { extend: 'Ext.data.Model', fields: ['name', 'salary','country'] }); ...
探索强大的React网格表格库：react-grid-table
gitblog_00051的博客
05-30 383
探索强大的React网格表格库：react-grid-table react-grid-tableA modular table, based on a CSS grid layout, optimized for customization.项目地址:https://gitcode.com/gh_mirrors/re/react-grid-table 在前端开发中，高效的数据展示是不可或缺的部...
React学习day13--antd组件：Grid栅格
weixin_46758732的博客
06-26 2337
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 3477
博客更新于 2024年，react-data-grid 已经是 7.x.x 大版本，可能配置项已经更新，建议参考官方文档进行调整，https://github.com/adazzle/react-data-grid。大部分的功能会集成在插件中，例如富表格编辑、右键菜单、拖拽功能、行分组管理等。主要功能：界面显示 Excel 预览，可以将一个对象或者 json 格式化成为界面。
nvidis-smi结果出现的表格每行每列都是什么意思啊
07-13
`nvidia-smi` 命令是 NVIDIA 提供的一个用于查询和监控 NVIDIA GPU 的工具。它提供了一个表格化的输出，其中每行代表一个 GPU 设备，每列代表不同的 GPU 属性。 以下是 `nvidia-smi` 输出表格中常见的列和它们的含义： - **Index**: GPU 设备的索引号。 - **Name**: GPU 设备的名称。 - **Fan**: GPU 风扇的转速百分比。 - **Temp**: GPU 温度，以摄氏度为单位。 - **Power**: GPU 的功耗，以瓦特为单位。 - **Memory-Usage**: GPU 内存使用情况，包括已使用的内存和总内存，以 MiB（兆字节）为单位。 - **GPU-Util**: GPU 的利用率，表示 GPU 正在执行计算任务的时间比例。 - **Compute M.**: 显示 GPU 正在使用的计算能力。 - **Encoder M.**: 显示 GPU 正在使用的视频编码能力。 - **Decoder M.**: 显示 GPU 正在使用的视频解码能力。 - **PCIe Tx/Rx**: 显示 GPU 设备与主机之间的 PCIe 传输速率。 这些列中的每个值都提供了关于 GPU 设备当前状态和性能的信息。通过查看这些列，你可以了解 GPU 的温度、功耗、内存使用情况以及计算能力等重要参数，以便进行性能监控和故障排查等操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值