layui 单元格快捷键可监听(enter 、tab、shift+ tab)

//快捷键:eventName 新增行事件名称
		setShortcutKeyT: function (eventName) {
			//
			$(document).on('keydown', '.layui-table-edit, .layui-form-select', function (e) {
				// debugger
				var td = $(this).parent('td').length == 1 ? $(this).parent('td') : $(this).parent().parent('td'),
					tr = td.parent('tr'),
					trs = tr.parent().parent().find('tr'),
					tr_index = tr.index(),
					td_index = td.index(),
					td_last_index = tr.find('[data-edit]:last').index(), //行尾单元格索引
					td_first_index = tr.find('[data-edit]:first').index(),
					// td_nextF = td.length == 1 ? td.nextAll('[data-edit]:first') : $(this).parent().parent().nextAll('[data-edit]:first'), //是否是下拉框
					// td_prevF = td.length == 1 ? td.prevAll('[data-edit]:first') : $(this).parent().parent().prevAll('[data-edit]:first') //是否是下拉框

					td_nextF = td.nextAll('[data-edit]:first'), //是否是下拉框
					td_prevF = td.prevAll('[data-edit]:first'); //是否是下拉框
				if (!e.shiftKey) {
					switch (e.key) {
						case 'Tab':
						case 'Enter':
							e.preventDefault();
							if (td_nextF.attr('data-edit') == 'text' || td_nextF.attr('data-edit') == 'true') {
								//可编辑的
								td_nextF.click();
							} else {
								//不可编辑的,下拉框
								td_nextF.click();
								td_nextF.find('select').next().find('.layui-select-title input').click();
								td_nextF.find('select').next().find('.layui-select-title input').focus(); //触发下拉输入框焦点
							}
							//到行尾单元格时
							if (td_index == td_last_index) {
								//新增一行
								$('#currentTableId').attr('addRowed', 'true'); //添加标识
								var eventNameVal = eventName || 'addRow';

								if (tr.find('[lay-event=' + eventNameVal + ']').length > 0) {
									tr.find('[lay-event=' + eventNameVal + ']').click();
								} else {
									$('[lay-event=' + eventNameVal + '] :first').click();
								}

								console.log('已新增一行');

								// tr.next().find('td').eq(td_first_index).click();
								// if (tr_index == trs.length - 1) { //待优化
								// trs.eq(0).find('td').eq(td_first_index).click(); //首个单元格是文本框时
								// trs.eq(tr_index + 1).find('td').eq(td_first_index).find('select').next().find('.layui-select-title input').click();//首个单元格是下拉框时
								// trs.eq(tr_index + 1).find('td').eq(td_first_index).find('select').next().find('.layui-select-title input').focus();//首个单元格是下拉框时
								// }
							}
							break;

						default:
							break;
					}
				} else {
					//监听shitf + tab
					if (e.keyCode == 9 && e.shiftKey) {
						// debugger
						console.log('tab & shift');

						e.preventDefault();
						if (td_prevF.attr('data-edit') == 'text' || td_prevF.attr('data-edit') == 'true') {
							//可编辑的
							td_prevF.click();
						} else {
							//不可编辑的,下拉框
							td_prevF.click();
							td_prevF.find('select').next().find('.layui-select-title input').click();
							td_prevF.find('select').next().find('.layui-select-title input').focus(); //触发下拉输入框焦点
						}
						//到行首单元格时
						if (td_index == td_first_index) {
							console.log('到行首单元格时');
							if (tr_index != 0) {
								console.log('到行首单元格时2');
								trs
									.eq(tr_index - 1)
									.find('td')
									.eq(td_last_index)
									.click(); //首个单元格是文本框时
								trs
									.eq(tr_index - 1)
									.find('td')
									.eq(td_last_index)
									.find('select')
									.next()
									.find('.layui-select-title input')
									.click(); //首个单元格是下拉框时
							}
						}
					}
				}
			});
		},
若单元格带templet模板的,例如以下:
{
	field: 'code',
	title: '代码',
	width: 239,
	templet: function (d) {
		return buildCode(d);
	},
	edit: 'false'
},
则需加上:
edit: 'false'

参考于:https://www.cnblogs.com/zakary-zhen/p/11125561.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值