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

news2025/1/30 19:48:24

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2286574.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分享| RL-GPT 框架通过慢agent和快agent结合提高AI解决复杂任务的能力-Arxiv

结论 “RL-GPT: Integrating Reinforcement Learning and Code-as-policy” RL-GPT 框架为解决大语言模型在复杂任务处理中的难题提供了创新有效的途径, 旨在将强化学习(RL)和代码即策略相结合, 以解决大语言模型&#xff08…

Prompt提示词完整案例:让chatGPT成为“书单推荐”的高手

大家好,我是老六哥,我正在共享使用AI提高工作效率的技巧。欢迎关注我,共同提高使用AI的技能,让AI成功你的个人助理。 许多人可能会跟老六哥一样,有过这样的体验:当我们遇到一个能力出众或对事物有独到见解的…

【开源免费】基于SpringBoot+Vue.JS在线考试学习交流网页平台(JAVA毕业设计)

本文项目编号 T 158 ,文末自助获取源码 \color{red}{T158,文末自助获取源码} T158,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

如何解压rar格式文件?8种方法(Win/Mac/手机/网页端)

RAR 文件是一种常见的压缩文件格式,由尤金・罗谢尔(Eugene Roshal)开发,因其扩展名 “rar” 而得名。它通过特定算法将一个或多个文件、文件夹进行压缩,大幅减小存储空间,方便数据传输与备份。然而&#xf…

Kafka 副本机制(包含AR、ISR、OSR、HW 和 LEO 介绍)

文章目录 Kafka 副本机制(包含AR、ISR、OSR、HW 和 LEO 介绍)1. 副本的基本概念2. 副本同步和一致性2.1 AR(Assigned Replicas)2.2 ISR(In-Sync Replicas)2.3 OSR(Out-of-Sync Replicas&#xf…

网关登录校验

网关登录校验 单体架构时我们只需要完成一次用户登录、身份校验,就可以在所有业务中获取到用户信息。而微服务拆分后,每个微服务都独立部署,不再共享数据。也就意味着每个微服务都需要做登录校验,这显然不可取。 鉴权思路分析 …

【C语言】在Windows上为可执行文件.exe添加自定义图标

本文详细介绍了在 Windows 环境下,如何为使用 GCC 编译器编译的 C程序 添加自定义图标,从而生成带有图标的 .exe 可执行文件。通过本文的指导,读者可以了解到所需的条件以及具体的操作步骤,使生成的程序更具专业性和个性化。 目录 1. 准备条件2. 具体步骤步骤 1: 准备资源文…

计算机毕业设计Python+知识图谱大模型AI医疗问答系统 健康膳食推荐系统 食谱推荐系统 医疗大数据 机器学习 深度学习 人工智能 爬虫 大数据毕业设计

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

商品信息管理自动化测试

目录 前言 一、思维导图 二、代码编写 1.在pom.xml文件中添加相关依赖 2.自动化代码编写 三、代码测试 小结 前言 1. 针对商品信息管理项目进行测试,商品信息管理项目主要有商品列表页、部门列表页、员工列表页,主要功能:对商品信息的…

【实践】基于SakuraLLM的离线日文漫画及视频汉化

介绍 LLM 大型语言模型(英语:large language model,LLM),也称大语言模型,是由具有大量参数(通常数十亿个权重或更多)的人工神经网络组成的一类语言模型。在进行语言理解与分析&…

常见的同态加密算法收集

随着对crypten与密码学的了解,我们将逐渐深入学习相关知识。今天,我们将跟随同态加密的发展历程对相关算法进行简单的收集整理 。 目录 同态加密概念 RSA算法 ElGamal算法 ELGamal签名算法 Paillier算法 BGN方案 Gentry 方案 BGV 方案 BFV 方案…

SSM-MyBatis-总结

文章目录 一、Hello MyBatis1.1 流程1.2 总结 二、Crud 的一些注意点三、参数传递3.1 #{ } VS ${ }3.2 单、复参数传递(1)单参数(2)多参数 -- Param(3)总结 四、查询结果返回--结果封装4.1 ResultType 一般…

万字长文总结前端开发知识---JavaScriptVue3Axios

JavaScript学习目录 一、JavaScript1. 引入方式1.1 内部脚本 (Inline Script)1.2 外部脚本 (External Script) 2. 基础语法2.1 声明变量2.2 声明常量2.3 输出信息 3. 数据类型3.1 基本数据类型3.2 模板字符串 4. 函数4.1 具名函数 (Named Function)4.2 匿名函数 (Anonymous Fun…

Flutter android debug 编译报错问题。插件编译报错

下面相关内容 都以 Mac 电脑为例子。 一、问题 起因:(更新 Android studio 2024.2.2.13、 Flutter SDK 3.27.2) 最近 2025年 1 月 左右,我更新了 Android studio 和 Flutter SDK 再运行就会出现下面的问题。当然 下面的提示只是其…

【Proteus仿真】【51单片机】简易计算器系统设计

目录 一、主要功能 二、使用步骤 三、硬件资源 四、软件设计 五、实验现象 联系作者 一、主要功能 1、LCD1602液晶显示 2、矩阵按键​ 3、可以进行简单的加减乘除运算 4、最大 9999*9999 二、使用步骤 系统运行后,LCD1602显示数据,通过矩阵按键…

JavaScript函数中this的指向

总结:谁调用我,我就指向谁(es6箭头函数不算) 一、ES6之前 每一个函数内部都有一个关键字是 this ,可以直接使用 重点: 函数内部的 this 只和函数的调用方式有关系,和函数的定义方式没有关系 …

51单片机入门_01_单片机(MCU)概述(使用STC89C52芯片;使用到的硬件及课程安排)

文章目录 1. 什么是单片机1.1 微型计算机的组成1.2 微型计算机的应用形态1.3 单板微型计算机1.4 单片机(MCU)1.4.1 单片机内部结构1.4.2 单片机应用系统的组成 1.5 80C51单片机系列1.5.1 STC公司的51单片机1.5.1 STC公司单片机的命名规则 2. 单片机的特点及应用领域2.1 单片机的…

51单片机入门_02_C语言基础0102

C语言基础部分可以参考我之前写的专栏C语言基础入门48篇 以及《从入门到就业C全栈班》中的C语言部分,本篇将会结合51单片机讲差异部分。 课程主要按照以下目录进行介绍。 文章目录 1. 进制转换2. C语言简介3. C语言中基本数据类型4. 标识符与关键字5. 变量与常量6.…

时间轮:XXL-JOB 高效、精准定时任务调度实现思路分析

大家好,我是此林。 定时任务是我们项目中经常会遇到的一个场景。那么如果让我们手动来实现一个定时任务框架,我们会怎么做呢? 1. 基础实现:简单的线程池时间轮询 最直接的方式是创建一个定时任务线程池,用户每提交一…

人工智能如何驱动SEO关键词优化策略的转型与效果提升

内容概要 随着数字化时代的到来,人工智能(AI)技术对各行各业的影响日益显著,在搜索引擎优化(SEO)领域尤为如此。AI的应用不仅改变了关键词研究的方法,而且提升了内容生成和搜索优化的效率&…