layui Table单元格编辑支持Enter键换行,包括下拉框单元格

发布于:2025-02-10 ⋅ 阅读:(81) ⋅ 点赞:(0)

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();
					}
				}
			});
		}
	});
})

网站公告

今日签到

点亮在社区的每一天
去签到