layui表格按钮控制选中行开启单元格可编辑
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
layui表格按钮控制选中⾏开启单元格可编辑
我们有时候需要对表格选中⾏开启单元格编辑,进⾏⼀些编辑操作,以下代码可为你提供思路:
for (var j = 0; j < idsAll.length; j++) {//开启单元格编辑状态
let index = idsAll[j]['LAY_TABLE_INDEX'];
if($('#resourceDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]')[0].checked){//判断单元格是否选中
$('#resourceDiv .layui-table tr[data-index=' + index + ']' ).find('td').not(".layui-table-col-special").data('edit', true);//核⼼代码
};
}
e(['table'], function(){
var table = layui.table
//监听单元格编辑
table.on('edit(resource)', function(obj){
var value = obj.value; //得到修改后的值
let data = obj.data; //得到所在⾏所有键值
let field = obj.field; //得到字段
var recodePage = $("#resourceDiv .layui-laypage-skip .layui-input").val();//获取当前页
var recodeLimit = $("#resourceDiv .layui-laypage-limits").find("option:selected").val();//获取当前页条数
});
});
idsAll⾥⾯是表格数据,layui表格请求我在parseData⽅法⾥将返回的数据赋值给了idsAll,你们也可以换个⽅式进⾏操作。
如果你的表格⾥有复选框,增加了左侧固定列序号或者其他操作,那你在开启⾏单元格编辑的时候需要使⽤我的这种⽅法:
$('#resourceQueryResultDiv .layui-table tr[data-index=' + index + ']' ).find('td').not(".layui-table-col-special").data('edit', true);//核⼼代码
如果没有只是单纯的开启单元格编辑填写信息的话,只需要:
$('#resourceQueryResultDiv .layui-table tr[data-index=' + index + ']' ).find('td').data('edit', true);//核⼼代码
关闭单元格的操作只需要把true变成false。
我再获取元素的时候都加了id,是为了锁定表,不让多个表相互影响,如果只有⼀个表格可以不进⾏这个操作。
在单元格监听事件中可以对⾃⼰修改的数据进⾏⼀些⾃⼰需要的操作,若有问题可以留⾔探讨。
哈哈。