固定操作列表格模板

于 2023-11-15 11:54:49 发布
阅读量329 收藏
点赞数
分类专栏： 前端工程化 html 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AIB_Kasic/article/details/134417144
版权 
<div class="flex">
  <div class="overflow-x-auto" style="flex: 1;">
    <div class="flex flex-nowrap" style="min-width: max-content;">
      <!-- 可拖拽列表内容 -->
    </div>
  </div>

  <div class="min-w-[296px] bg-bg-1" style="flex-shrink: 0;">
    <!-- 操作列内容 -->
  </div>
</div>
土生土长的IU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layuiTable固定列
冷湮的博客
05-17 1万+
开发工具与关键技术：VS and Js 作者：代富强 撰写时间：2021.5.17 平常写layuiTable表格的时候，如果列太多就会发现一些经常查看的信息就需要来回拖动滚动条才能看到，十分麻烦。如果有什么办法可以让经常查看的那一列定在一旁会不会方便很多呢？ 其实要把经常查看的那一列定在一旁并不难。下面先写出layuiTable的css代码： @*Layui表格*@ 在引入Js文件之后就开始编写js代码，首先给它声明一
java不固定模板excel_Java+POI+模板”一：打造复杂Excel 报表
weixin_33445134的博客
02-26 798
Java+POI+模板”一：打造复杂Excel 报表博客分类：1 设计思路Java 对于Excel 的操作一般借助于POI 类库，由于有些报表的表头比较复杂，直接用POI 控制报表的生成比较困难，这时可以先制作Excel 报表模板，而后再通过Java 调用POI 函数将用户数据写入到Excel 报表模板，最后导出到新的目标文件即可。2 设计步骤2.1 初始步骤2.1.1创建Excel 报表模板根据...
Table表格头部固定和列固定，内容滚动
qq_45669178的博客
11-06 2680
注：在移动端上有问题。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table { table-layout: fixed; /*使用fixed实现th固定宽度*/ width: 100%;
EasyExecl导出模板,实现动态下拉列
zhangshengqiang168的博客
01-25 4391
1.需要效果. 2.pom.xml 依赖jar包 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.0.2</version> </dependency> 3.自定义注.
【Axure视频教程】固定中继器表格首列
mushe93的博客
06-21 285
今天教大家在Axure里如何制作固定中继器表格首列的原型模板~~~
【Axure视频教程】固定中继器表格首尾列
mushe93的博客
07-26 387
今天教大家在Axure里如何制作固定中继器表格首列和尾列（操作列）的原型模板~~~
POI之excel固定模板导出
weixin_44499403的博客
06-22 3342
POI之excel固定模板导出一、简介二、excel模板三、项目中maven依赖四、Excel模板操作代码五、Controller层excel模板导出接口代码六、导出excel 一、简介 Apache POI 是用Java编写的免费开源的跨平台的 Java API，Apache POI提供API给Java程式对Microsoft Office格式档案读和写的功能。POI为“Poor Obfuscation Implementation”的首字母缩写，意为“简洁版的模糊实现”。 二、excel模板 三、
element表格固定某一行_vue+element table实现对表格的某一列作特殊处理
weixin_35671421的博客
12-29 1693
背景在表格渲染数据的时候，都需对某列比如偏差结果作特殊处理：后台返回的数据为：0 ，1 ，-1表格显示列为 ：正常，超正差，超负差显示样式分别为 tag的：success primary danger效果图image.png实现分析1，准备表格渲染数据tableData2，准备列字段，在需要特殊处理的列上添加特殊的字段比如：磅单编号 添加字段status: "link"，偏差结果...
Docxtemplater模板导出word，动态不确定列数的表格，表头加粗，且表格居中
最新发布
weixin_43913004的博客
11-14 1131
Docxtemplater动态生成word表格
[精选]表的创建与管理-第5章数据库对象的操作.pptx
10-12
在表的管理中，除了创建和操作数据，还有表结构的修改，如添加、删除或修改列，以及重命名表和删除不再需要的表。这些操作需要谨慎执行，以免影响到其他依赖于该表的对象或数据。 总之，表的创建与管理是数据库管理...
element-ui表格列金额显示两位小数的方法
10-18
在模板中，我们使用`v-bind`或`:`操作符和过滤器来应用转换。对于Element-UI的表格，我们可以在`el-table-column`的`slot-scope`内使用`scope`对象来访问当前行的数据。例如，如果`payPrice`字段是以分表示的，我们...
C# DatagridView常用操作汇总
09-04
在C#编程中，`DataGridView`控件是一...以上只是`C# DatagridView`操作的一部分，还有更多高级特性如模板列、分组、冻结列、合并单元格等，可以根据项目需求灵活应用。熟练掌握这些操作，将使你在开发中更加游刃有余。
[精选]任务五 布局技术表格.pptx
10-12
插入表格时，可以通过“插入”菜单或工具栏的“表格”按钮进行操作，并在设计视图中调整表格属性、单元格属性以及行和列属性。通过这些属性设置，可以实现对表格外观和功能的精细控制。 编辑表格时，可以灵活地添加...
[精选]第三章 数据库中表的管理.pptx
10-12
修改表通常涉及添加、删除或更改列，以及调整列的数据类型。删除表则是彻底移除表及其所有数据。 理解并熟练掌握这些数据类型对于有效地设计数据库和编写SQL语句至关重要，它直接影响到数据的存储、查询性能以及...
html-a标签href点击不跳到顶部（无效跳转）解决
IU
04-28 2379
a标签如果不添加任何值，会默认跳到顶部，如下 <a href="">点击会跳到顶部</a> 解决以上问题可以用下面三种方式 <a href="###">点击无效跳转</a> <a href="javascript:;">点击无效跳转</a> //qq空间用 <a href="javas...
a标签包裹不住div--已解决
IU
05-05 1649
示例代码 <a href="#"> <div> <a href="#"></a> </div> </a> 上述代码由浏览器渲染后变成如下 <a href="#"></a> <div> <a href="#">...
【html系列】div中会padding会溢出
IU
04-16 632
<div> <span class="is_span">这是span</span> </div> css .is_span{ padding:10px; } 此时会造成空间溢出 如下图 解决方法 //给span加上样式 display: inline-block; 给最外层添加overflow：hidden也行 不过 span的padding就失去了效果 ...
xhtml跟html的区别
IU
10-24 512
xhtml跟html的区别，封装的常客。
ftl 通过layui设置固定列之后按钮不展示
06-01
在使用FreeMarker（ftl）模板和layui设置固定列之后，如果按钮不展示，可能也是因为按钮被隐藏在了固定列的后面，导致无法显示出来。这个问题同样可以通过调整固定列和非固定列的顺序来解决。 具体的实现方法可以参考以下代码： ```html <table class="layui-table" lay-size="sm"> <colgroup> <col width="100"> <col width="150"> <col> <col width="200"> <col width="200"> <col width="200"> <col width="100"> </colgroup> <thead> <tr> <th rowspan="2">ID</th> <th rowspan="2">用户名</th> <th rowspan="2">性别</th> <th colspan="3">联系方式</th> <th rowspan="2">操作</th> </tr> <tr> <th>手机</th> <th>邮箱</th> <th>地址</th> </tr> </thead> <tbody> <#list userList as user> <tr> <td>${user.id}</td> <td>${user.username}</td> <td>${user.sex}</td> <td>${user.phone}</td> <td>${user.email}</td> <td>${user.address}</td> <td> <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button> </td> </tr> </#list> </tbody> </table> ``` ```js layui.use(['table', 'form'], function() { var table = layui.table; // 渲染表格 table.render({ elem: '.layui-table', cols: [[ {field: 'id', title: 'ID', fixed: 'left', width: 100}, {field: 'username', title: '用户名', fixed: 'left', width: 150}, {field: 'sex', title: '性别', width: 100}, {field: 'phone', title: '手机', width: 200}, {field: 'email', title: '邮箱', width: 200}, {field: 'address', title: '地址', width: 200}, {fixed: 'right', title: '操作', toolbar: '#toolbar', width: 100}, ]], data: [ // 数据 ], }); // 监听窗口大小变化 $(window).on('resize', function() { var width = $('.layui-form').width(); $('.layui-table-box').css('width', width + 'px'); }).resize(); // 监听工具条按钮点击事件 table.on('toolbar', function(obj) { switch(obj.event) { case 'add': // 添加操作 break; case 'delete': // 删除操作 break; } }); }); ``` 在这个例子中，使用了FreeMarker的语法来生成表格中的数据行，同时将操作列设置为固定列，并且将其放在了列的最后面，这样就可以保证操作按钮可以正常显示了。同时，在监听工具条按钮点击事件时，需要根据按钮的event属性来判断是哪个按钮被点击了，然后执行相应的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值