zoukankan      html  css  js  c++  java
  • # 实现二维表格行头和列头固定的解决方案

    在业务中,常常会遇到二维表格固定首行和首列的需求。这里来探讨试验一下,二维表格固定行和列的几种解决方案。作为自我学习和记录成果的过程。
    项目代码github地址

    第一种:position sticky的解决方案

    1. css布局
    • 上下布局,下方内容区固定高度,内容y轴方向超出出现滚动条,即简单的就实现了首行固定。(但是内容x轴方向内容超出,左边列还没固定)
    • 利用position新属性,sticky left: 0; top: 0;,内容x轴方向内容超出出现滚动条,实现左边首列固定。(但是,上方首行未能随着x轴方向滚动条滚动)
    • 监听x轴方向的滚动事件,取得event.scrollLeft值,及时同步给上方首行内容区transform: translateX(${scrollLeft}px),实现首行同时滚动效果。(此时已实现首行首列固定)
    • 多行多列固定,与首行首列固定方案同理即可,自行脑补。
    1. 数据渲染
    • 后端给的数据可以是这样的结构:1. 行头列表:对象数组(有唯一id属性)。 2. 列头列表:对象数组(有唯一id属性)。 内容区:对象数组(同时有行头列头数组项唯一id,相当于x轴y轴坐标),与之匹配。

    文字描述,生涩。见demo:src/components/demo-pos-sticky.vue 数据模拟:src/components/mock.js

    第二种:position absolute的解决方案

    后续补充。。。。

  • 相关阅读:
    使pre的内容自动换行
    textarea文本换行和页面显示换行符
    SQL查询包含汉字的行
    网站引导页插件intro.js 的用法
    jquery.cookie中的操作
    sql自动生成汉语拼音和首字母函数
    IE,Chrome滚动条样式CSS
    Vcenter server 5.5上传ISO镜像
    Vcenter server 5.5添加用户角色及分配权限
    Vcenter server 5.5安装部署
  • 原文地址:https://www.cnblogs.com/damonFeng/p/10213354.html
Copyright © 2011-2022 走看看