小程序冻结首列

最新推荐文章于 2021-07-30 17:27:59 发布
最新推荐文章于 2021-07-30 17:27:59 发布
阅读量256 收藏
点赞数
分类专栏： 小程序冻结首列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zknxhglylc/article/details/116006954
版权

小程序冻结首列代码补充

**

页面

**

月日 星期 工号 姓名 异常 上班1 下班1 上班2 下班2 上班3 下班3 正班时数 请假类别 刷卡加班 加班申请 
			<block wx:for="{{listData}}" wx:key="unique">
				<view class="tr bg-g">
					<view class="td YYMMDD">{{item.YYMMDD}}</view>  
					<view class="td XQ">{{item.XQ}}</view>
					<view class="td EmpNo">{{item.EmpNo}}</view>
					<view class="td EmpName">{{item.EmpName}}</view>
					<view class="td ErrorWhy">{{item.ErrorWhy}}</view>
					<view class="td kq">{{item.GO1}}</view>
					<view class="td kq">{{item.OUT1}}</view>
					<view class="td kq">{{item.GO2}}</view>
					<view class="td kq">{{item.OUT2}}</view>
					<view class="td kq">{{item.GO3}}</view>
					<view class="td kq">{{item.OUT3}}</view>
					<view class="td kq">{{item.WorkTime}}</view>
					<view class="td CSJ_AttDayData">{{item.LeaveTypeText}}</view>
					<view class="td overTime">{{item.OverTime}}</view>
					<view class="td reqOverTime">{{item.ReqOverTime}}</view>
				</view>
			</block> 
		</view>
	</scroll-view>

	<view class='div2'>
		<view class="table table2">
			<view class="tr bg-w">
				<view class="th YYMMDD">年月日</view>
			</view>

			<block wx:for="{{listData}}" wx:key="unique">
				<view class="tr bg-g">
					<view class="td YYMMDD">{{item.YYMMDD}}</view>
				</view>
			</block>
		</view>
	 </view> 

</block>

**

js

**

data: {
listData: [
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-28”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-29”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
{ YYMMDD: “2020-05-30”, XQ: “三”, EmpNo: “C5019”, EmpName: “张”, GO1: “GO1”, OUT1: “OUT1”,
GO2: “GO2” , OUT2: “OUT2”, GO3: “GO3”, OUT3: “OUT3”, WorkTime: “07:30”,
LeaveTypeText: “LeaveTypeText” , OverTime: “10:00”, ReqOverTime: “11:00”},
]
},

**

css

**

.table1 {
overflow: hidden;
margin-left: 10rpx;
width: 1000px;
}

.div2 {
position:absolute;
z-index: 102;
}

.table2 {
width: 100px;
}

.scrollClass1 {
position: relative;
margin-left: 30rpx;
z-index: 100;
position: absolute;
}

.scrollClass {
background: yellowgreen;
width: 100%;
height: 400px;
}

.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
}

.bg-w {
background: teal;
}

.bg-g {
background: red;
}

.th {
width: 100px;
justify-content: center;
background: #fbaf17;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}

.th YYMMDD {
width: 100px;
}

.th XQ {
width: 20px;
}

.th EmpNo {
width: 20px;
}

.th EmpName {
width: 20px;
}

.th ErrorWhy {
width: 20px;
}

.th kq {
width: 30px;
}

.th LeaveTypeText {
width: 30px;
}

.th overTime {
width: 30px;
}

.td {
width: 100px;
justify-content: center;
background: #ddd;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}

.td YYMMDD {
width: 100px;
}

.td XQ {
width: 20px;
}

.td EmpNo {
width: 20px;
}

.td EmpName {
width: 20px;
}

.td ErrorWhy {
width: 20px;
}

.td kq {
width: 30px;
}

.td LeaveTypeText {
width: 30px;
}

.td overTime {
width: 30px;
}

参考：https://blog.csdn.net/qq_23907525/article/details/106506758

zknxhglylc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android 上下左右滑动的表格,适用小程序的表格table，冻结行，冻结列，可左右，上下滑动...
weixin_34125314的博客
05-28 805
更新记录1.0.0(2020-07-22)1.暂时适用于微信小程序，2.点击首列跳转或提示3.首列合并行，首列背景色不一样4.点击行变背景色平台兼容性app微信小程序支付宝小程序百度小程序字节小程序QQ小程序快应用2.6.16 app-vue××××××h5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxpc...
MFC GridCtrl 首行首列冻结
11-19
基于vs2008的MFC的GridCtrl控件的使用，就是简单的首行首列冻结方式，另外还有详细的参考步骤：http://blog.csdn.net/i_love_u_5/article/details/49930357
小程序中如何固定表头和首列
一个有节操的码农
07-30 1373
<scroll-view scroll-x onScroll="scrollX" scroll-left="{{scrollLeft}}"> <view class="table__head" style="width:{{tableWidth}}rpx;"> <view class="table__head__td" a:for="{{headList}}" a:key="attrIndex" a:for-index="attrIndex" a:for-item.
微信小程序表格列冻结功能的实现
qq_23907525的博客
06-04 3413
微信小程序表格列冻结功能的实现 **由于公司项目功能需求：查询日考勤报表，如图，用户需要增加横向滚动功能，重点是冻结年月日这列，就像EXCEL那样。
微信小程序展示列表之表头固定顶部
xueyuanjiayou的博客
10-09 7256
微信小程序表头固定屏幕顶部 下面的例子适合 于 表头直接在顶部的需求 没有查询条件之类的组件在上面 wxml中的代码 的关键代码是 style=&amp;amp;amp;quot;position:fixed; top:0;&amp;amp;amp;quot; 和 style='margin-top:{{marginTop}}rpx;&amp;amp;amp;quot; &amp;amp;amp;amp;lt;view class='table'&amp;amp
微信小程序固定表头
热门推荐
TIANGE120的博客
10-24 1万+
采用scroll-view嵌套，实现滚动表格时，表头不停留在页面顶部。 主要是在js中指定tbody的高度：窗口可用高度-要保留的高度（表头）； wxml 本公司共发生{{countNum}}例风险事件 营业单位 风险事件\n发生次数 损失金额 RCSA评分结果
sencha touch表格冻结首列demo实例
03-12
用于冻结表格的首列，达到悬浮在左侧的效果
bootstraptable冻结列例子.doc
01-14
bootstrap-table冻结列例子
QT Tabwidget 冻结表头和冻结列
05-25
在"漫步繁华街"-...同时进行了抽象，提取，封装了一个独立的类，可以直接使用，只需要设定表头数据，内容数据，冻结列数据以及各个的颜色即可。 在这里感谢【漫步繁华街】的代码分享。
TableFreeze冻结列.rar
05-14
项目中需要用到自己动态写table拼接的，前几列冻结，头冻结，底部冻结的，适合使用本案例。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
table的行列冻结、行冻结、列冻结
06-13
基于jquery 实现 对已有table表冻结行列、冻结行、冻结列，兼容主流浏览器。代码中有详细的注释说明，有使用案例。实际使用中如果发现有缺陷，欢迎留言提建议，或联系
jQuery实现冻结表格行和列
10-24
本文给大家分享的是前些日子做的项目中的一个客户的特殊要求，很少遇到，查询了好久的度娘，才算找到解决方案，这里分享给大家，有需要的小伙伴可以参考下。
jquery 列表行冻结、列冻结
12-15
基于jquery 实现 table 行冻结、列冻结，本来想免费分享给大家，可是csdn要求最低必须是2分，希望大家用的好
DataGridView冻结首列和冻结首行代码示例
05-17
DataGridView冻结首列和冻结首行代码示例 1.直接运行可看效果 2.支持列冻结，取消冻结 3.支持行冻结，取消冻结 4.冻结后仍可见拖动条 5.无多余代码，有注释，逻辑简单高效 欢迎指教！[email protected]
easyui-treegrid冻结右侧列插件.zip
06-19
easyui treegrid 冻结右侧列插件
ScrollView 往上滑动，里面的一个View停在某个位置的思路
零下7度的浪漫
07-10 5273
1.scrollView的contentoffset 为view的左上角，减去此时scrollView的左上角 2.而且还不需要让那个红色的view removeFromSuperView ，直接self.view AddSubView 就会自动从原来的那个View脱离开来 3.以后遇到问题的思路。当发现UIView很许多奇特的效果的时候，思考它是不是在不断的改变父控件。 #pragma m
小程序滑动窗口的实现，固定第一列和第一行
qq_40632009的博客
06-23 560
原文链接：：https://www.jianshu.com/p/a8b6b628941e
关于IE与FF下class与className的区别
ddige1793的博客
02-28 187
http://www.okajax.com/a/200807/0F5N152008.html 今天在做表格效果发现以前的表格交替前景和突出显示在IE7和FF最新版中竟然有点问题，关键就在于这个class和className上:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www....
JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题
weixin_34221773的博客
06-30 769
前言：一年前，博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ，通过该篇，确实可以实现bootstrapTable的冻结列效果，并且可以兼容ie浏览器。这一年的时间，不断有园友以及群里面的朋友问过我关于固定高度之后，冻结列页面效果不能对齐的问题，奈何博主太忙，一直没有抽空将这个问题优化。最...
bootstrap-table 冻结首行首列
最新发布
12-28
bootstrap-table 是一个基于 Bootstrap 的表格插件，它提供了丰富的功能以及灵活的配置选项。要实现冻结首行首列的效果，可以通过以下步骤来操作： 第一步，引入 bootstrap-table 插件，并在 HTML 页面中创建一个表格元素。 第二步，利用插件提供的属性和方法，将表格的首行和首列进行固定。这可以通过设置插件的 fixedColumns 和 fixedRows 属性来实现。 第三步，根据实际需求来配置固定首行首列的数量和其他样式属性。例如，可以设置固定的行列数，及冻结的宽度等。 第四步，根据插件的文档和示例代码，进一步优化和调整样式布局，以确保冻结首行首列的效果符合预期。 总的来说，通过以上步骤，可以很容易地在 bootstrap-table 中实现冻结首行首列的效果，使得表格在滚动时仍然能保持首行首列的固定显示。这样可以提高表格的可读性和使用体验，让用户更方便地查看和操作表格数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值