解决Layui滚动条的干扰与数据的监听工作

本文介绍了如何使用layui插件进行表格渲染,并解决因插件导致的滚动条问题。通过设置表格宽度避免滚动条出现。此外,文章还讨论了监听功能在表格中的应用,特别是在图一和图二两种不同布局下,如何有效地获取和使用当前行数据的ID进行修改和删除操作。通过监听功能,可以实现点击行获取ID,从而进行数据回填。

今天我想跟大家讲一下怎样运用layui 插件来完成表格渲染和监听。Layui这个插件最突出的设计就是在于它的表格。
我们常常会运用到layui来完成表格的渲染设置,但是在运用的时候要注意到一些问题。比如在这一次做项目中我就运用layui这个插件来完成表格渲染的功能。但是在这次表格渲染过程中我就遇到表格下面出现了滚动条。刚开始以为是受到我搭建页面时候,设置内外边距的影响。为此琢磨了好久,最后发现是layui 自身插件的问题。
在这里插入图片描述
表格渲染的时候,插件带来的问题。这种解决的办法就是在表格渲染配置完成的时候,给它设置宽度就可以。这样就不会出现烦人的滚动条了。当然这个 width 是不用带像素(PX)。同时这个值是不固定的,看你需要,自已去调配出适宜的宽度即可。
cols: [[ { title: ‘酒菜小类名称’, field: ‘LiquorSName’, align: ‘center’ },]]
width : 1519.2
});
在这次项目中,我还很大程度上运用到layui这个插件的监听功能。
图一 图二
在这里插入图片描述
大家可以对比一下图一和图二他们有什么不同。很明显图一的修改删除按钮是套在表格里面的,这种做法往往就会更加方便获取当前行数据的ID ,拼接参数即可。根据ID 去进行修改与删除操作即可
function SetOption(data) {
var btn = “”;
var AcademeID = data.AcademeID;//变量先声明
btn += “修改”
btn += “删除”
return btn;
}

但是,图二,修改删除按钮在外面,这种拼接的方法就运用不了了,这时候我们应该如何去获取它的ID并且运用ID去查询当行数据进行数据的回填呢?
这时候你就要运用到监听了。监听它当行的数据。
$("#openUpdate").click(function () {
var checkStatus = layuiTable.checkStatus(‘tabPageTable’); 即为渲染表格的ID,基础ID
var Data = checkStatus.data
if (Data[0] == null) {
return;
}
$.post("", { ID: Data[0].ID }, function (data) {
});
});
只有这样你才点击当行,获取当行的数据才可以把当行的ID 获取并传递到控制器。进行页面数据回填的操作。
好了今天的内容就这么多,没什么技术要点。希望对你有一丝丝的帮助。

回答: 在layui中,可以通过修改CSS样式来自定义滚动条的样式。可以使用以下选择器来修改滚动条的不同部分的样式: - ::-webkit-scrollbar:滚动条整体部分,可以设置宽度等属性。 - ::-webkit-scrollbar-button:滚动条两端的按钮。 - ::-webkit-scrollbar-track:外层轨道。 - ::-webkit-scrollbar-track-piece:内层滚动槽。 - ::-webkit-scrollbar-thumb:滚动的滑块。 - ::-webkit-scrollbar-corner:边角。 - ::-webkit-resizer:定义右下角拖动块的样式。\[1\] 如果要在layui表格中实现横向滚动条和纵向滚动条,可以将表格的page设置为false,并将limit设置为Number.MAX_VALUE或直接设置为0。同时,可以给表格设置一个固定的高度,超出部分会出现滚动条。\[2\]\[3\] 在CSS中,可以通过修改表格的宽度来解决横轴出现滚动条时,除标题行外其他行变短的情况。可以使用如下样式: .app-con .layui-table-view .layui-table { width: 100%; } 如果在layui弹窗中出现下拉框的滚动条,可以通过修改弹窗内容的样式来解决。可以使用如下样式: .layui-layer-page .layui-layer-content { position: relative; overflow: unset!important; } 以上是关于layui滚动条样式的解决方法。 #### 引用[.reference_title] - *1* [css 修改滚动条样式(随笔记)](https://blog.youkuaiyun.com/weixin_38817361/article/details/126408869)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [layui总结1](https://blog.youkuaiyun.com/hnn567/article/details/126118276)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值