layuiTable固定列

开发工具与关键技术：VS and Js
作者：代富强
撰写时间：2021.5.17

平常写layuiTable表格的时候，如果列太多就会发现一些经常查看的信息就需要来回拖动滚动条才能看到，十分麻烦。如果有什么办法可以让经常查看的那一列定在一旁会不会方便很多呢？
其实要把经常查看的那一列定在一旁并不难。下面先写出layuiTable的css代码：

@*Layui表格*@

在引入Js文件之后就开始编写js代码，首先给它声明一下变量 var layer, layuiTable, form;//用于加载layui中的弹出层模块和table表格模块 var tabClient;//供货商表

然后是表的具体数据：
$(function () {
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer;
layuiTable = layui.table;
//初始化表格
tabClient = layuiTable.render({
elem: “#tabClient”,
cellMinWidth: 120,
cols: [[
{ type: ‘checkbox’, fixed: ‘left’ },//复选框列,fixed:‘left’ 将列固定在左边
{ type: “numbers”, title: “序号”, align: “center” },//序列号
{ field: “clientID”, title: “clientID”, hide: true },//隐藏列，客户ID
{ field: “clientName”, title: “客户名称”, align: “center” },//供货商名称
{ field: “clientType”, title: “客户类型”, align: “center” },//供货商类型
{ field: “disName”, title: “所属地区”, align: “center” },//地区
{ field: “contactPerson”, title: “联系人”, align: “center” },//联系人
{ field: “contactNumber”, title: “联系电话”, align: “center” },//联系电话
{ field: “initialreceivable”, title: “期初应收”, align: “center” },//期初应收
{ field: “contactAddress”, title: “联系地址”, align: “center” },//联系地址
{ field: “defaultClientNo”, title: “默认客户否”, align: “center”, templet: ‘#checkboxDefault’, unresize: true },//默认客户否
{ field: “disabledNo”, title: “禁用否”, align: “center”, templet: “#checkboxDisabled”, unresize: true },//禁用否
{ field: “employeeName”, title: “业务员”, align: “center” },//专属业务员
{ field: “annotation”, title: “备注”, align: “center” },//备注
{ title: “操作”, templet: setOperator, align: “center” }//toolbar通过ID选择模板
]],
page: {
limit: 10,//每页数据条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]//每页条数的选择项
},
data: [],
});
//加载表格数据
tabClientSearch();
});
});
视图的代码就算写完了，剩下的就是控制器查询数据，加上从控制器查询出来的数据之后就得到了一个完整的客户信息表：

从图上可以看到，操作列正常情况是被隐藏在右边的，每次修改或者删除客户信息的时候就需要先把滚动条拖到右边让操作列显示出来，这样我们才能够客户的信息进行一个修改或者删除的操作。
这个时候只需要在layuiTable表格的js代码的操作列加上一句代码：fixed: “right”
{ title: “操作”, templet: setOperator, align: “center”, fixed: “right” }//toolbar通过ID选择模板
这样操作列就会固定在表格右侧，同理，为了方便快捷我们也可以把客户名称和客户类型固定在表格的左侧，把fixed: "right"换成fixed: "left"即可。

layuiTable固定列相关推荐

html 点击一行变色,elementui点击table每一行会变色，当有固定列的时候，
1. html代码 @row-click="rowClick" :row-class-name="tableRowClassName" :row-style=& ...
vue element 表格使用fixed固定列后切换菜单时错位问题
开发时由于列表数据项过多需要固定操作列,于是在操作列上加了fixed="right". 一开始没什么问题,但是在切换菜单时出现了错位现象后来找到问题,由于vue element- ...
el-table中设置fixed固定列之后错位的奇葩原因
场景 ElementUI中el-table设置指定列固定不动,不受滚动条影响: ElementUI中el-table设置指定列固定不动,不受滚动条影响_BADAO_LIUMANG_QIZHI的博客-C ...
html制作固定列的表格,带固定列的简单HTML表格
我期望中间列的宽度是左右两列的3倍. 200(从左到右)的宽度看起来好像按照200,200,600的顺序指定宽度,而不是按照200,600,200的规定出现.换句话说,最后一列的宽度是前两个宽度的3倍 ...
iview table 自定义列_案例 | iview中Table：拖拽适配列、自定义固定列、合并行
文 / 景朝霞来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 ) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间 ...
html表格横向竖向滚动,利用纯css实现table固定列与表头中间横向滚动的思路和实例...
前言最近在做的后台管理系统要处理大量的表格,因为原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工 ...
label居中_表格固定列宽时如何居中？
列宽固定居中的设置的时候,我们通常使用 p{宽度} 来指定固定的列宽,这时单元格会自动换行,换行之后是左对齐的,如何获得居中对齐呢? \begin{tabular}{|p{54pt}l|p{71pt} ...
element el-table加入固定列时滚动条无法移动失效的情况
其原因是因为固定的列的高度过高覆盖了滚动条导致点击到的元素并不是滚动条这个是我们只需要修改一下固定列的高度让他把滚动条漏出来就行 // 我这里用的是stylus(类似于less的css预处理 ...

layuiTable固定列

layuiTable固定列相关推荐

最新文章

热门文章