layui+jsp项目中实现table单元格嵌入下拉选择框功能，下拉选择框可手动输入内容或选择默认值，修改后数据正常回显。
需求
table列表中的数据实现下拉框修改数据，当默认的下拉框不符合要求时，可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。
实现
- layui框架下拉框组件只能选择存在的数据，不支持将输入的内容显示在input中的功能，通过拼接输入框和下拉框实现该功能。
- 因使用输入框和下拉框实现，修改数据逻辑也分为两套。
- 输入框：检测input输入框失去焦点时调用更新接口。
- 下拉框：下拉框检测到选择后调用更新接口。
- 功能要求不刷新表格，因此使用
var inputField = tr.find('.input-id-key'); inputField.val(data.value);修改表格显示。 - 使用自定义组件查询出的数据不能正常回显在单元格中，使用
var inputField = row.querySelector('.input-id-key');直接修改页面显示。
效果如下图，样式需自己修改。
实现代码
<!DOCTYPE html>
<html lang="en">
<head><!-- 引入LayUI --><link rel="stylesheet" href="plugins/layui2.4.5/css/layui.css" media="all">
</head>
<body class="no-skin">
<script src="plugins/layui2.4.5/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
</body>
<!-- 自定义下拉框组件 -->
<script type="text/html" id="selectTpl"><div class="layui-form-item"><input type="text" id="input_id_key" name="key" placeholder="计划数量修改原因"autocomplete="off" class="layui-input input-id-key"style="position:absolute;z-index:2;width:80%;"><select type="text" id="selectOptions" lay-filter="hc_select" autocomplete="off"placeholder="" class="layui-select" style="color:#000000"><option value="" disabled selected>请选择或输入</option>{{# layui.each(d.dictionaryOptions, function(index, item){ }}<option value="{{item.name}}">{{item.name}}</option>{{# }); }}</select></div>
</script>
<script>function tdTitle() {$('th').each(function (index, element) {$(element).attr('title', $(element).text());});$('td').each(function (index, element) {$(element).attr('title', $(element).text());});};layui.use(['form', 'layedit', 'laydate', 'table', 'element', 'util'], function () {var $ = layui.jquery;var table = layui.table;var form = layui.form;var element = layui.element;// 初始化下拉选项数据var dictionaryOptions = [];// 从接口获取下拉选项数据$.ajax({url: '/oms/...', // 获取下拉选择框列表接口method: 'GET',success: function (res) {dictionaryOptions = res; // 返回的数组赋值到dictionaryOptionsform.render('select'); // 更新渲染}});$(document).ready(function () {initTab();var cols = [[{type: 'numbers'},{field: 'reason', title: '计划数量修改原因', width: 200, templet: function (d) {d.dictionaryOptions = dictionaryOptions; // 将选项数据绑定到当前行数据return layui.laytpl(document.getElementById('selectTpl').innerHTML).render(d);}},......]];var type = '';initTable1(type, cols);});//选择框选择后执行，通过获取tr找到对应行的单元格，否则只会修改第一行数据form.on('select(hc_select)', function (data) {var tr = $(data.elem).closest('tr'); // 确保这能准确找到最近的tr元素var index = tr.data('index'); // 使用jQuery的data方法来获取data-indexvar inputField = tr.find('.input-id-key'); // 直接在tr内查找inputif (inputField.length > 0) {//确保查找到inputinputField.val(data.value); // 更新值} else {console.error('未找到指定的输入框。');}var rowData = table.cache['demoEvent'][index]; // 获取修改单元格的整行数据，调用修改接口时可能需要其他字段updateReason(rowData,data.value)//修改逻辑接口});//鼠标移出输入框执行$(document).ready(function () {// 使用事件委托方式绑定 blur 事件$(document).on('blur', '#input_id_key', function () {var inputValue = $(this).val();//单元格输入的值var cell = $(this).closest('td');var row = cell.closest('tr');var rowIndex = row.index(); //行索引var rowData = table.cache['demoEvent'][rowIndex];//获取修改单元格的整行数据updateReason(rowData,inputValue)//修改逻辑接口});});//table默认加载function initTable1(orderType, cols) {table.render({elem: '#test', url: '/oms/...', height: 'full-150', toolbar: '#myToolbar', cols: cols,id: 'demoEvent', where: {}, page: {layout: ['prev', 'page', 'next', 'countPage', 'count', 'skip'] //自定义分页布局, groups: 2 //只显示 1 个连续页码, first: false //不显示首页, last: false //不显示尾页}, limit: 100, done: function (res, curr, count) {if (res.data.length > 0) {// 获取表格的tbody元素var tbody = document.querySelector('#test').nextElementSibling.querySelector('tbody');for (var i = 0; i < res.data.length; i++) {var row = tbody.rows[i];if (row) {// 获取该行的输入框var inputField = row.querySelector('.input-id-key');if (inputField) {// 回显输入框的值inputField.value = res.data[i].reason;}}}}tdTitle();}});}});
</script>
</html>相关文章：
layui+jsp项目中实现table单元格嵌入下拉选择框功能，下拉选择框可手动输入内容或选择默认值，修改后数据正常回显。
需求 table列表中的数据实现下拉框修改数据，当默认的下拉框不符合要求时，可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。 实现 layui框架下拉框组件只能选择存在的数据，不支持将输入的内容显示在input中的功能&#x…...
2024年客户体验的几个预测
数字化转型、以客户为中心的理念、数字技术的发展和产品的不断创新，都为客户体验带来了巨大的改变。 目前，我们看到很多公司都在致力于塑造一种以客户为中心的商业模式。企业开始用更多技术、更多数据和更多产品来强化自己在客户体验方面的能力。 那么&a…...
【C++】动态内存管理new和delete
文章目录 一、C的内存管理方式二、new和delete的用法1.操作内置类型2.操作自定义内置类型 三、new和delete的底层实现1.operator new和operator delete函数2.new和delete的实现原理 四、定位new表达式五、malloc/free和new/delete的区别 一、C的内存管理方式 之前在C语言的动态…...
Java面向对象特性
Java继承： 继承的概念： 在Java中，继承（inheritance）是面向对象编程的一个重要概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。通过继承，…...
odoo17 tree视图添加按钮
需求描述 点击下图中tree视图上的同步退货单按钮，弹出相应的form视图进行退货单同步，然后点击同步按钮调用后端python代码处理。 实现步骤 主要文件目录结构 js文件的创建 /** @odoo-module **/ import {registry } from "@web/core/registry"; import {listVie…...
PreparedStatement 与Statement 的区别，以及为什么推荐使用 PreparedStatement ？
在Java中，PreparedStatement和Statement都是用于执行SQL语句的重要接口，但它们在功能、安全性和性能上有着显著的差异。理解这些差异对于编写高效且安全的数据库应用程序至关重要。 Statement：基本的SQL执行者 首先，让我们从Sta…...
wsl ubuntu 安装Anaconda3步骤
如何在Ubuntu上安装Anaconda3呢？本章记录整个安装过程。 1、下载脚本 https://mirrors.bfsu.edu.cn/anaconda/archive/Anaconda3-2023.09-0-Linux-x86_64.sh 下载之后，将脚本上传到Ubuntu里。 2、安装脚本 bash Anaconda3-2021.11-Linux-x86_64.sh根据提示进行安装，提示输…...
Vue3响应式 ref全家桶
<template><div>{{ man.name }}<hr><button click"change">修改</button></div> </template> <script setup lang"ts"> const man {name:"cc"} const change () >{man.name "大cc&q…...
Mac(M1芯片)安装多个jdk，Mac卸载jdk
1.jdk下载 oracle官方链接：oracle官方下载链接 2.安装 直接下一步，下一步就行 3.查看是否安装成功 出现下图内容表示安装成功。 4.配置环境变量 open -e .bash_profile 路径建议复制过去 #刷新环境变量 source ~/.bash_profile 5.切换方法 6.jdk…...
)
Warning message:package ‘ggplot2’ is not available (for R version 3.2.3)
install.packages(ggplot2) Installing package into ‘/usr/local/lib/R/site-library’ (as ‘lib’ is unspecified) Warning message: package ‘ggplot2’ is not available (for R version 3.2.3) 根据你提供的信息，警告消息表明在你的R版本（3.2.3…...
Spring Boot 过滤器和拦截器详解
目录 Spring Boot 过滤器1.什么是过滤器2.工作机制3.实现过滤器 Spring Boot 拦截器1. 什么是拦截器2. 工作原理3.实现4.拓展（MethodInterceptor 拦截器）实现 过滤器和拦截器区别过滤器和拦截器应用场景过滤器拦截器 Spring Boot 过滤器 1.什么是过滤器 …...
Eureka介绍与使用
Eureka是一个开源的服务发现框架，由Netflix开发并在2015年成为Apache的顶级项目。Eureka的核心功能是服务注册与发现，它允许微服务应用在启动时将自己注册到Eureka服务器，并能通过Eureka服务器来发现其他已注册的服务。 使用Eureka有以下几个…...
JVM专题九：JVM分代知识点梳理
今天开始，咱们开始剖析JVM内存划分的原理细节，以及我们创建的那些对象在JVM中到底是如何分配，如何流动的，首先解决第一个问题：JVM内存的一个分代模型:年轻代、老年代、永久通过之前的专题我们知道，那就是我…...
wireshark常用过滤命令
wireshark常用过滤命令 wireshark抓包介绍单机单点：单机多点：双机并行： wireshark界面认识默认布局调整布局(常用)显示FCS错误 wireshark常见列Time回包数据报对应网络模型 wireshark基本操作结束抓包再次开始抓包 **wireshark常用过滤命令**…...
「全新升级，性能更强大——ONLYOFFICE 桌面编辑器 8.1 深度评测」
文章目录 一、背景二、界面设计与用户体验三、主要新功能亮点3.1 高效协作处理3.2 共同编辑，毫无压力3.3 批注与提及3.4 追踪更改3.5 比较与合并3.6 管理版本历史 四、性能表现4.1 集成 AI 工具4.2 插件强化 五、用户反馈与使用案例 一、背景 Ascensio System SIA -…...
线程版服务器实现（pthread_server）
用到的所有方法所需要的参数可以在wrap.c文件中查询，wrap中找不到的直接通过man手册查询 1.首先介绍一下我自己写的包裹文件，里面有各种在可能要用到的方法 wrap.c: #include <stdlib.h> #include <stdio.h> #include <unistd.h> #…...
js异常处理方案
文章目录 异常处理方案同步代码的异常处理Promise 的异常处理async await 的异常处理 感谢阅读，觉得有帮助可以点点关注点点赞，谢谢！ 异常处理方案 在JS开发中，处理异常包括两步：先抛出异常，然后捕获异常。…...
C++文件路径处理2 - 路径拼接路径解析
1. 关键词2. filesystem.h3. filepath.cpp6. 测试代码7. 运行结果8. 源码地址 1. 关键词 关键词： C 文件路径处理 路径拼接 获取父目录的路径 获取文件名 获取拓展名 跨平台 应用场景： 路径的拼接路径的解析 2. filesystem.h #pragma once#include…...
数据结构5---矩阵和广义表
一、矩阵的压缩存储 特殊矩阵:矩阵中很多值相同的元素并且它们的分布有一定的规律。 稀疏矩阵:矩阵中有很多零元素。压缩存储的基本思想是: (1)为多个值相同的元素只分配一个存储空间; (2)对零元素不分配存储空间。 1、特殊矩阵的压缩存储 （1）对称矩…...
jquery使用infinitescroll无线滚动+自定义翻页
jquery版本 jquery-1.8.3.js infinitescroll版本 2.0.0 如果infinitescroll版本最新的jquery版本也要用新的 接口用nodejs jquery.infinitescroll.js官网地址 前端代码《接口返回JSON数据》 <!DOCTYPE html> <html lang"en"> <head><meta cha…...
AI Agent与Agentic AI：原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...