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

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

news 2025/9/8 6:27:56

需求

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列表中的数据实现下拉框修改数据&#xff0c;当默认的下拉框不符合要求时&#xff0c;可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。 实现 layui框架下拉框组件只能选择存在的数据&#xff0c;不支持将输入的内容显示在input中的功能&#x…...

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

2024年客户体验的几个预测

数字化转型、以客户为中心的理念、数字技术的发展和产品的不断创新&#xff0c;都为客户体验带来了巨大的改变。 目前&#xff0c;我们看到很多公司都在致力于塑造一种以客户为中心的商业模式。企业开始用更多技术、更多数据和更多产品来强化自己在客户体验方面的能力。 那么&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继承&#xff1a; 继承的概念&#xff1a; 在Java中&#xff0c;继承&#xff08;inheritance&#xff09;是面向对象编程的一个重要概念&#xff0c;它允许一个类&#xff08;子类&#xff09;继承另一个类&#xff08;父类&#xff09;的属性和方法。通过继承&#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中&#xff0c;PreparedStatement和Statement都是用于执行SQL语句的重要接口&#xff0c;但它们在功能、安全性和性能上有着显著的差异。理解这些差异对于编写高效且安全的数据库应用程序至关重要。 Statement&#xff1a;基本的SQL执行者 首先&#xff0c;让我们从Sta…...

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

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

编程日记 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官方链接&#xff1a;oracle官方下载链接 2.安装 直接下一步&#xff0c;下一步就行 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) 根据你提供的信息&#xff0c;警告消息表明在你的R版本&#xff08;3.2.3…...

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

Spring Boot 过滤器和拦截器详解

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

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

Eureka介绍与使用

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

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

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

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

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

wireshark常用过滤命令

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

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

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

文章目录 一、背景二、界面设计与用户体验三、主要新功能亮点3.1 高效协作处理3.2 共同编辑&#xff0c;毫无压力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文件中查询&#xff0c;wrap中找不到的直接通过man手册查询 1.首先介绍一下我自己写的包裹文件&#xff0c;里面有各种在可能要用到的方法 wrap.c: #include <stdlib.h> #include <stdio.h> #include <unistd.h> #…...

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

js异常处理方案

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

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

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

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

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

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

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

编程日记 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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/8/31 19:10:20

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/8/28 23:59:45

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/8/31 22:19:37

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/9/4 10:28:12

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/6/25 4:41:54

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/9/4 1:22:39

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/9/6 0:31:52

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/9/2 17:49:08

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2025/9/7 8:49:12

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/9/2 17:50:21