layui Table单元格编辑支持Enter键换行,包括下拉框单元格
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();}}});}});
})