layui踩坑记

本文记录了在使用layui表格时遇到的问题,包括wangEdit内容在表格中显示超出的处理,单元格编辑时的校验与提示,以及checkbox状态改变的控制。针对这些问题,提出了修改源码实现高度超出判断、利用table.on监听事件恢复单元格初始值和使用button代替checkbox等解决方案。
摘要由CSDN通过智能技术生成

一、表格显示wangEdit不超出省略

场景描述:layui表格自带单行省略、折叠隐藏,点击扩展按钮被隐藏内容;但是wangEdit编辑出的内容包含图片、无序有序列表等,会存在换行,在layui表格会完整显示一整块,看源码(左侧)只判断了宽度超出。

目前未找到更好的解决办法就直接改了源码加了高度超出判断

layui清除了ul li的基本样式,无法显示wangEdit的有序无序,得用

.layui-table-main td li ,.layui-table-tips-main li{
	list-style: inherit;
} 

二、单元格编辑校验

场景:单元格编辑,输入值不符合要求时弹tip提示并且恢复原值,但layui单元格编辑完后,鼠标失去焦点后表格值就已经改变了,也不能赋chang事件值改变前监听,layui是用table.on()监听表格数据变化,监听到时,表格数据就已经改变了

所以若在table.on里判断值不符合要求后,得用$(this).val(preValue)来改单元格的初始值,那问题又来了,table.on事件的obj.date里没有改变前的值,也没有api方法去获取,但我在obj.tr[0].cells对象里扣取到了,代码如下:

//监听单元格编辑
table.on('edit(layui-action)', function (obj) {
    var value
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值