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"即可。