当前位置：首页 > news >正文

layui+jsp项目中实现table单元格嵌入下拉选择框功能，下拉选择框可手动输入内容或选择默认值，修改后数据正常回显。

news 2026/2/11 3:02:20

需求

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/6/28 19:44:32

2024年客户体验的几个预测

数字化转型、以客户为中心的理念、数字技术的发展和产品的不断创新，都为客户体验带来了巨大的改变。目前，我们看到很多公司都在致力于塑造一种以客户为中心的商业模式。企业开始用更多技术、更多数据和更多产品来强化自己在客户体验方面的能力。那么&a…...

编程日记 2024/6/28 19:43:30

【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语言的动态…...

编程日记 2024/6/28 19:42:28

Java面向对象特性

Java继承： 继承的概念： 在Java中，继承（inheritance）是面向对象编程的一个重要概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。通过继承&#xff0c…...

编程日记 2024/6/28 19:41:27

odoo17 tree视图添加按钮

需求描述点击下图中tree视图上的同步退货单按钮，弹出相应的form视图进行退货单同步，然后点击同步按钮调用后端python代码处理。实现步骤主要文件目录结构 js文件的创建 /** @odoo-module **/ import {registry } from "@web/core/registry"; import {listVie…...

编程日记 2024/6/28 19:40:23

PreparedStatement 与Statement 的区别，以及为什么推荐使用 PreparedStatement ？

在Java中，PreparedStatement和Statement都是用于执行SQL语句的重要接口，但它们在功能、安全性和性能上有着显著的差异。理解这些差异对于编写高效且安全的数据库应用程序至关重要。 Statement：基本的SQL执行者首先，让我们从Sta…...

编程日记 2024/6/28 19:39:21

如何在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根据提示进行安装，提示输…...

编程日记 2024/6/28 19:37:17

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…...

编程日记 2024/6/28 19:36:13

Mac(M1芯片)安装多个jdk，Mac卸载jdk

1.jdk下载 oracle官方链接：oracle官方下载链接 2.安装直接下一步，下一步就行 3.查看是否安装成功出现下图内容表示安装成功。 4.配置环境变量 open -e .bash_profile 路径建议复制过去 #刷新环境变量 source ~/.bash_profile 5.切换方法 6.jdk…...

编程日记 2024/6/28 19:33:09

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…...

编程日记 2024/6/28 19:32:07

Spring Boot 过滤器和拦截器详解

目录 Spring Boot 过滤器1.什么是过滤器2.工作机制3.实现过滤器 Spring Boot 拦截器1. 什么是拦截器2. 工作原理3.实现4.拓展（MethodInterceptor 拦截器）实现过滤器和拦截器区别过滤器和拦截器应用场景过滤器拦截器 Spring Boot 过滤器 1.什么是过滤器 …...

编程日记 2024/6/28 19:30:03

Eureka介绍与使用

Eureka是一个开源的服务发现框架，由Netflix开发并在2015年成为Apache的顶级项目。Eureka的核心功能是服务注册与发现，它允许微服务应用在启动时将自己注册到Eureka服务器，并能通过Eureka服务器来发现其他已注册的服务。使用Eureka有以下几个…...

编程日记 2024/6/28 19:29:01

JVM专题九：JVM分代知识点梳理

今天开始，咱们开始剖析JVM内存划分的原理细节，以及我们创建的那些对象在JVM中到底是如何分配，如何流动的，首先解决第一个问题：JVM内存的一个分代模型:年轻代、老年代、永久通过之前的专题我们知道，那就是我…...

编程日记 2024/6/28 19:27:59

wireshark常用过滤命令

wireshark常用过滤命令 wireshark抓包介绍单机单点：单机多点：双机并行： wireshark界面认识默认布局调整布局(常用)显示FCS错误 wireshark常见列Time回包数据报对应网络模型 wireshark基本操作结束抓包再次开始抓包 **wireshark常用过滤命令**…...

编程日记 2024/6/28 19:24:55

「全新升级，性能更强大——ONLYOFFICE 桌面编辑器 8.1 深度评测」

文章目录一、背景二、界面设计与用户体验三、主要新功能亮点3.1 高效协作处理3.2 共同编辑，毫无压力3.3 批注与提及3.4 追踪更改3.5 比较与合并3.6 管理版本历史四、性能表现4.1 集成 AI 工具4.2 插件强化五、用户反馈与使用案例一、背景 Ascensio System SIA -…...

编程日记 2024/6/28 19:23:51

线程版服务器实现（pthread_server）

用到的所有方法所需要的参数可以在wrap.c文件中查询，wrap中找不到的直接通过man手册查询 1.首先介绍一下我自己写的包裹文件，里面有各种在可能要用到的方法 wrap.c: #include <stdlib.h> #include <stdio.h> #include <unistd.h> #…...

编程日记 2024/6/28 19:22:46

js异常处理方案

文章目录异常处理方案同步代码的异常处理Promise 的异常处理async await 的异常处理感谢阅读，觉得有帮助可以点点关注点点赞，谢谢！ 异常处理方案在JS开发中，处理异常包括两步：先抛出异常，然后捕获异常。…...

编程日记 2024/6/28 19:21:37

C++文件路径处理2 - 路径拼接路径解析

1. 关键词2. filesystem.h3. filepath.cpp6. 测试代码7. 运行结果8. 源码地址 1. 关键词关键词： C 文件路径处理路径拼接获取父目录的路径获取文件名获取拓展名跨平台应用场景： 路径的拼接路径的解析 2. filesystem.h #pragma once#include…...

编程日记 2024/6/28 19:20:26

数据结构5---矩阵和广义表

一、矩阵的压缩存储特殊矩阵:矩阵中很多值相同的元素并且它们的分布有一定的规律。稀疏矩阵:矩阵中有很多零元素。压缩存储的基本思想是: (1)为多个值相同的元素只分配一个存储空间; (2)对零元素不分配存储空间。 1、特殊矩阵的压缩存储 （1）对称矩…...

编程日记 2024/6/28 19:17:19

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…...

编程日记 2024/6/28 19:16:18

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2026/1/10 10:16:16

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51