用react 构建电子表格（6）--改变单元格大小

MoonlitHan

已于 2023-02-20 09:37:05 修改

阅读量838

点赞数 1

分类专栏： react 文章标签： reactjs

于 2020-12-12 08:23:54 首次发布

本文链接：https://blog.csdn.net/wh_xia_jun/article/details/110921098

版权

react 专栏收录该内容

15 篇文章

订阅专栏

前面我们已经通过数据控制了样式，后面马上还有4件s要搞。

改变单元格大小（宽度、高度），我们先考虑宽度。
合并单元格
编译单元格数据
表格上应用公式

改变单元格大小和table布局有点关系 fix布局可以在col属性上设置，但colgropup、col 使用需要谨慎，因为它的很多属性H5不支持！

tableLayout 属性用来显示表格单元格、行、列的算法规则。我们用fixed

宽度涉及表格宽度？行宽度？th 宽度？td宽度？前2个我们好像没设置啊

1、首先去掉这4个元素上所有的width设置

2、table布局采取fixed

3、通过改变th宽度，设置列宽度，td上不单独设置宽度，th宽度、td列的宽度中的最大值决定了一列的宽度？

th样式为：.top_td

Tr 的样式 .ttr

td的样式: .ttd

4、初始化宽度设置在th上。

在state中搞个属性，记录宽度数组,把这个state属性传给TableHead，

先不考虑引入colgroup与col。

还是通过数据控制列宽：

        this.state = {
            history_record: [{
                data_model: {},   //数据
                ......
                colWidths:[], //列宽度数组
                rowHeights:[] //行高度数组
            }],
            selectCell1:[], //点击单元格1   记录点击的第一个单元格
            selectCell2:[], //点击单元格2
            // 0 无动作，1 表示点击  2表示按Ctrl点击
            userActionType:0
        };

TableHead.js

//TableHead.js
import React, { Component } from 'react';
import CommTable from './commTable';
import CommCell from "./commRow";
export default class TableHead extends Component {
    // 根据数值转换为大写字母表
     IntToLbl(index){
        var b = (index - 1).toString(26).toUpperCase();
        var c = [];
        for (var i = 0; i < b.length; i++) {
            var x = b.charCodeAt(i);
            if (i <= 0 && b.length > 1)
                x = x - 1;
            if (x <= 57)
                c.push(String.fromCharCode(x - 48 + 65));
            else
                c.push(String.fromCharCode(x + 10));
        }
        return c.join("");
    }
    render() {
        let c = this.props.colNum;  //列数
        let colWidths=this.props.colWidths;
        let tableHeadCells = [];
        for (var i = 0; i < c; i++) {
            tableHeadCells.push(<th  key={"#tableHeadCells" + i} className="top_td"  style={{width: ''+colWidths[i]+'pt'}} >{this.IntToLbl(i+1)}</th>);
        }
  return (
      <tr key="tableHeadKey"><th  key="tableHead00Key"></th>{tableHeadCells}</tr>
        )
    }
}

实现上？拖动决定宽度？还是输入属性值决定宽度呢，拖动好像更酷，当然，点击表头列上手柄改变宽度，应该也是可行的方式。

点击手柄改变宽度的方法，对我最简单，先别想那多，先实现拖动效果再说！所有方法全部统一到table当中！因为要改变table数据模型！

构建表头：th布局拖动手柄

th中放一个div,div采取flex布局，th上不能放flex布局，和表格布局有冲突！

先尝试这个办法

    //点击表头拖动手柄的事件处理
    handleCellMouseDown=(event,i)=>{
        let x=parseInt(event.clientX);
        let y=parseInt(event.clientY);
        //按下了拖动手柄
        this.state.head_x=x;
        this.state.head_x_col=i;
        this.state.head_x_mouseDown=1;

        //点击改变宽度的实现
        let colWidths=this.state.history_record[this.state.history_record.length-1].colWidths;
        let l=colWidths[i];
        if(event.ctrlKey){
             l=l-20;
        }else{
            l=l+20;
        }
            if (l<=1) l=1;
        if (l>800) l=800;
        colWidths[i]=l;
        //setState 即可引发渲染
        this.setState({
            history_record: this.state.history_record,
        });
    }

拖动主要有三个事件，三个事件 ...略

行表头布局:要求垂直均分：

/**每行的头**/
.tabHeadDiv_row{
    height: 100%;
    width: 100%;
    display:flex;
    flex-direction:column;

}
.tabHeadDiv_row_child{
    flex:1
}