layui Table表格编辑支持Enter键换行
- 可编辑单元格
$(".layui-table td").keydown(function (e) {
// console.log("111",e);
var index = $(this).index(),
tr = $(this).parent('tr'),
isKeydown = (event.type == "keydown");
if (e.code == "Enter") {
isKeydown && tr['next']().children('td').eq(index).click();
}
});
单元格中包含下拉框
layui.use(['dropdown', 'util', 'layer', 'table', 'laydate', 'form'], function () {
var table = layui.table,
laydate = layui.laydate,
form = layui.form,
layer = layui.layer;
// 根据返回数据中某个字段来判断开启该行的编辑
var editable = function(d){
if(d.mark === "02") return 'text'; // 这里假设以 editable 字段为判断依据
};
table.render({
elem: '#' + inspectionTable
, data: tableData
,toolbar: '#toolbarHeader'
, cols: [[
{align: 'center', field: 'inspectionFeatureName', width: 150, title: '检验项目'}
, {align: 'center', field: 'inspectionStandard', width: 150, title: '检验标准描述'}
, {align: 'center', field: 'inspectionValue', width: 120, title: '检验结果', edit: editable ,templet: '#inspectionValue-select' }
, {fixed: 'right', width: 100, align:'left', toolbar: '#operateBar',title: '操作'}
]]
, loading: true
, height: 'full'
,done: function(res, curr, count){
var options = this;
console.log(res,curr,count)
// 获取当前行数据 - 自定义方法
table.getRowData = function(tableId, elem){
var index = $(elem).closest('tr').data('index');
return table.cache[tableId][index] || {};
};
// 监听表格内所有单元格的 keydown 事件
//$(".layui-table td[data-field='inspectionValue']").keydown(function (e) {
$(".layui-table td").keydown(function (e) {
// console.log("111",e);
var index = $(this).index(),
tr = $(this).parent('tr'),
isKeydown = (event.type == "keydown");
if (e.code == "Enter" || e.keyCode == 13 || e.keyCode == 108) {
// console.log("enter",index,tr.index());
if(isKeydown && tr['next']().children('td').eq(index).find('select').length>0){
console.log(tr['next']().children('td').eq(index).find('select'))
tr['next']().children('td').eq(index).find('select').next().find('input').focus().click()
}else{
isKeydown && tr['next']().children('td').eq(index).click();
}
}
});
}
});
})