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…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
STM32标准库-ADC数模转换器
文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”：输入模块（GPIO、温度、V_REFINT）1.4.2 信号 “调度站”：多路开关1.4.3 信号 “加工厂”：ADC 转换器（规则组 注入…...
Java多线程实现之Runnable接口深度解析
Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...
python读取SQLite表个并生成pdf文件
代码用于创建含50列的SQLite数据库并插入500行随机浮点数据，随后读取数据，通过ReportLab生成横向PDF表格，包含格式化（两位小数）及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...
【汇编逆向系列】六、函数调用包含多个参数之多个整型-参数压栈顺序，rcx,rdx,r8,r9寄存器
从本章节开始，进入到函数有多个参数的情况，前面几个章节中介绍了整型和浮点型使用了不同的寄存器在进行函数传参，ECX是整型的第一个参数的寄存器，那么多个参数的情况下函数如何传参，下面展开介绍参数为整型时候的几种情…...
STL 2迭代器
文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器？ 1.迭代器…...
react-pdf（pdfjs-dist）如何兼容老浏览器（chrome 49）
之前都是使用react-pdf来渲染pdf文件，这次有个需求是要兼容xp环境，xp上chrome最高支持到49，虽然说iframe或者embed都可以实现预览pdf，但为了后续的定制化需求，还是需要使用js库来渲染。 chrome 49测试环境 能用的测试…...
iOS 项目怎么构建稳定性保障机制？一次系统性防错经验分享（含 KeyMob 工具应用）
崩溃、内存飙升、后台任务未释放、页面卡顿、日志丢失——稳定性问题，不一定会立刻崩，但一旦积累，就是“上线后救不回来的代价”。 稳定性保障不是某个工具的功能，而是一套贯穿开发、测试、上线全流程的“观测分析防范”机制。 …...