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…...
API密钥失效？图片生成卡顿？Webhook丢失？Midjourney接入常见故障诊断手册，98%问题5分钟定位
更多请点击： https://intelliparadigm.com 第一章：Midjourney API接入的底层机制与通信模型 Midjourney 并未官方开放 RESTful API，其主流接入方式依赖于 Discord Bot 模拟用户行为与消息事件监听，本质是基于 WebSocket 协议的双…...
告别手动匹配：利用Allegro插件高效构建DDRx多负载等长约束
1. 多负载DDRx等长约束的痛点解析 每次面对4颗以上DDR芯片的PCB设计，工程师们最头疼的就是同步总线的等长约束设置。我做过一个8层板项目，上面挂了6颗DDR4颗粒，光是数据线就有72根，更不用说地址控制线了。手动设置等长组的时候&am…...
登封市总医院暨公卫应急救治中心全光网络建设百盛分析报告
一、项目背景登封市总医院暨公卫应急救治中心是河南省重点民生工程，位于登封市少林大道与花楼路交叉口东南角，总投资 18.6 亿元，建设用地面积约 169.14 亩，总建筑面积达 22.52 万平方米，核定床位 1500 张登封市公共资源…...
SkillLite Channel 与 Gateway 配置完全指南：Webhook、环境变量与桌面助手
摘要：本文说明 SkillLite 如何通过 skilllite channel serve 或 skilllite gateway serve 暴露入站 HTTP（POST /webhook/inbound），以及如何用环境变量 SKILLLITE_CHANNEL_* 将入站内容摘要推送到钉钉、飞书（Lark&#…...
别再凭感觉了！手把手教你用MPE和NOHD评估激光笔、测距仪的人眼安全距离
别再凭感觉了！手把手教你用MPE和NOHD评估激光笔、测距仪的人眼安全距离 激光笔和手持测距仪已经成为现代生活中常见的工具，从教学演示到户外测量，它们的应用场景越来越广泛。然而，这些看似小巧的设备如果使用不当，可能…...
自动驾驶强化学习实战指南：HighwayEnv深度配置与优化技巧
自动驾驶强化学习实战指南：HighwayEnv深度配置与优化技巧 【免费下载链接】HighwayEnv A minimalist environment for decision-making in autonomous driving 项目地址: https://gitcode.com/gh_mirrors/hi/HighwayEnv HighwayEnv是一个专为自动驾驶决策任…...
拉罗替尼Larotrectinib常见副作用ALT升高及疲劳如何有效应对【海得康】
在拉罗替尼（Larotrectinib）治疗NTRK融合阳性实体瘤的临床实践中，ALT升高与疲劳堪称两大最具代表性的不良反应。前者直指肝脏安全底线，后者则如影随形地侵蚀着患者的日常功能与生活质量。根据FDA批准的处方信息、三项关键临床试验&…...
应对复杂流媒体生态：N_m3u8DL-RE跨平台下载引擎的智能解析方案
应对复杂流媒体生态：N_m3u8DL-RE跨平台下载引擎的智能解析方案 【免费下载链接】N_m3u8DL-RE Cross-Platform, modern and powerful stream downloader for MPD/M3U8/ISM. English/简体中文/繁體中文. 项目地址: https://gitcode.com/GitHub_Trending/nm3/N_m3u8…...
智能合约钱包自动化交互：ca-agent-skills 技能库解析与实践
1. 项目概述与核心价值最近在梳理智能合约钱包（Smart Contract Wallet）的生态工具时，我注意到了 Portkey 团队开源的ca-agent-skills仓库。这个项目乍一看名字有点抽象，但深入研究后，我发现它解决了一个非常实际且关键…...
Claudio项目解析：Telegram集成Claude CLI的智能助手部署与成本控制
1. 项目概述：Claudio，一个连接Claude Code与Telegram的智能助手如果你和我一样，日常开发工作流中重度依赖Claude Code CLI，同时又希望能在手机上随时与Claude对话，那么Claudio这个项目绝对值得你花时间研究。它本质上是…...