JGUI源码:DataTable固定列样式(20)
本来感觉这个固定列很容易实现的,一般都是几个table组合实现,真正自己从头做的时候,发现有很多坑,本文只是固定列原理,真正实现datatable的话,代码量比较大的,后续再进行完善。
使用左中右三个datatable实现显示
|left|center|right|
left和right是固定列,效果如下
实现原理:
(1)左右div使用posion:absolute固定
(2)center区域div使用overflow:scroll显示
(3)设置line-height,这个属性很重要,不然的话三个datatable最小td高度不一样会导致总高度错开。
(4)后续需要完善:根据left,right宽度js计算center区域的left,right.
<style>
#mydatatable {
width: 400px;
height: 600px;
position: relative;
line-height: 30px;
}
.jgui-datatable .tableleft {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
background: #eee;
z-index: 1000;
}
.jgui-datatable .tableright {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
background: #eee;
z-index: 1000;
}
.jgui-datatable .tablebody {
position: absolute;
right: 50px;
left: 100px;
top: 0px;
z-index: 50;
overflow: scroll;
}
.jgui-datatable th {
min-width: 50px;
text-align: center; }
.jgui-datatable td {
text-align: center;
}
</style>
</head>
<body>
<div>这是DataTable固定左右列显示</div>
<div class="jgui-datatable" id="mydatatable">
<div> <div class="tableleft">
<table>
<thead>
<tr>
<th>
<input type="checkbox" />
</th>
<th>
ID
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
001
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
001
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
001
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
001
</td>
</tr>
</tbody>
</table>
</div>
<div class="tablebody">
<table>
<thead>
<tr>
<th>
姓名
</th>
<th>
年龄
</th>
<th>
性别
</th>
<th>
班级
</th>
<th>
语文
</th>
<th>
数学
</th>
<th>
外语
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
张三
</td>
<td>
31
</td>
<td>
男
</td>
<td>
1班
</td>
<td>
91
</td>
<td>
90
</td>
<td>
80
</td>
</tr>
<tr>
<td>
张三
</td>
<td>
31
</td>
<td>
男
</td>
<td>
1班
</td>
<td>
91
</td>
<td>
90
</td>
<td>
80
</td>
</tr>
<tr>
<td>
张三
</td>
<td>
31
</td>
<td>
男
</td>
<td>
1班
</td>
<td>
91
</td>
<td>
90
</td>
<td>
80
</td>
</tr>
<tr>
<td>
张三
</td>
<td>
31
</td>
<td>
男
</td>
<td>
1班
</td>
<td>
91
</td>
<td>
90
</td>
<td>
80
</td>
</tr>
</tbody>
</table>
</div>
<div class="tableright">
<table>
<thead>
<tr>
<th>
总分
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
261
</td>
</tr>
<tr>
<td>
261
</td>
</tr>
<tr>
<td>
261
</td>
</tr>
<tr>
<td>
261
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
JGUI源码:DataTable固定列样式(20)的更多相关文章
- JGUI源码:鼠标中键滚动再次优化(5)
//电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...
- JGUI源码:从头开始,建一个自己的UI框架(1)
开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
- JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...
- jQuery 源码解析(二十七) 样式操作模块 坐标详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...
- 源码编译安装MySQL8.0.20
1 概述 本文章主要讲述了如何从源码编译安装MySQL社区版8.0.20,首先会介绍一些编译安装的相关知识,然后开始编译安装 2 源码编译安装的相关知识 2.1 make与configure make ...
- netty源码解解析(4.0)-20 ChannelHandler: 自己实现一个自定义协议的服务器和客户端
本章不会直接分析Netty源码,而是通过使用Netty的能力实现一个自定义协议的服务器和客户端.通过这样的实践,可以更深刻地理解Netty的相关代码,同时可以了解,在设计实现自定义协议的过程中需要解决 ...
- 记录一次源码扩展案列——FastJson自定义反序列化ValueMutator
背景:曾经遇到一个很麻烦的事情,就是一个json串中有很多占位符,需要替换成特定文案.如果将json转换成对象后,在一个一个属性去转换的话就出出现很多冗余代码,不美观也不是很实用. 而且也不能提前在j ...
- JGUI源码:右键菜单实现(12)
1.要想实现右键菜单,就要先能响应右键函数 $('#down').mousedown(function(e){ if(3 == e.which){ alert('这是右键单击事件'); }else i ...
- JGUI源码:实现日期控件显示(17)
本文实现一个日期控件显示,日期控件看起来很复杂,其实原理很简单,大部分情况下我们直接使用别人做得好的日期控件就行,但有时候特殊需求,比如显示提醒之类的,恐怕第三方控件就不好实现了, 为了使程序逻辑看起 ...
随机推荐
- qt5.11.2+vs2017环境下配置pcl1.8.1以及第三方依赖库vtk的编译
1.准备工作 我所用的开发环境是win10下的qt5.11.2配置了vs2017的编译器,根据自己所用的VS的版本去官网下载对应版本的pcl库,如下 PCL-1.8.1-AllInOne-msvc20 ...
- LeetCode算法题-Min Cost Climbing Stairs(Java实现)
这是悦乐书的第307次更新,第327篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第176题(顺位题号是746).在楼梯上,第i步有一些非负成本成本[i]分配(0索引). ...
- Java基础系列--07_Object类的学习及源码分析
Object: 超类 (1)Object是类层次结构的顶层类,是所有类的根类,超类. 所有的类都直接或者间接的继承自Object类. 所有对象(包括数组)都实现这个类的方法 (2)Object ...
- MacOS 10.13.6 下装xcode 流程
1.最好先安装brew https://github.com/Homebrew/brew/releases 自动安装脚本 /usr/bin/ruby -e "$(curl -fsSL htt ...
- 好程序员web前端分享javascript关联数组用法总结
好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...
- [LeetCode] 19. 删除链表的倒数第N个节点
题目链接:https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 题目描述: 给定一个链表,删除链表的倒数第 n 个节点, ...
- 编译安装redis-5.0.4
编译安装为redis官方推荐安装方式. 本例中使用linux版本为:CentOS Linux release 7.0.1406 (Core),Basic Web Server 一.安装依赖包 yum ...
- windows安全更新程序(KB4093112) 安装失败 错误0x80070011
解决办法:win + R → 输入regedi 将默认安装路径改回C盘的program files
- 初识Haskell 二:基本操作符、类型Type、数据结构
对Discrete Mathematics Using a Computer的第一章Introduction to Haskell进行总结.环境Windows 1. 在安装了ghci后,便可以进行Ha ...
- [references] How to Do Research
目录: ** 0x01 做研究/写论文的Alpha/Beta ** 0x02 How to Do Research | 经典指南 ** 0x03 思考写作与研究的区别 | The difference ...