Easyui里的datagrid嵌入select下拉框
问题:
想使用datagird里嵌入select下拉框,并在提交form表单时获取datagrid选中的每行数据里的每个下拉框选中的值。

解决方案:
其中economicIssuesSelect使用下拉框,重点关注
initEconomicIssues(row)方法。这里的方法需要传递row
$('#queryPcpTable').datagrid({title: 'pcp领用查询信息',width: wd,url: send_url,queryParams:params,striped: true,pagination: true,pageNumber: 1,// 默认初始每页的行数pageSize: 5,// 每页行数可选列表pageList: [5],nowrap: true,checkOnSelect: true,selectOnCheck: true,columns: [[{field: 'checkbox', checkbox: true},{field: 'consumingNo',title: '领用单号',align: 'center',width: 180,formatter:function(value,row,index) {return '<a name="detail_data" href="#" οnclick="javascript:detailRow(this)">'+ value + '</a>';}},{field: 'consumingNumber', title: '领用数量', align: 'center',width: 120},{field: 'consumingAmount', title: '领用金额', align: 'center', width: wd * (1.3 / (col_size + 1))},{field: 'economicIssuesSelect', title: '领用事项', align: 'center', width: wd * (1.3 / (col_size + 1)),formatter:function(value,row,index) {var selectHtml = initEconomicIssues(row);return selectHtml;}},// { field: 'economicIssuesNo',// title: '领用事项', align: 'center',// width: wd * (1.3 / (col_size + 1)),// editor: {// type: 'combobox',//下拉框// options: {// valueField: 'economicIssuesNo',//对应为表格中的field// textField: 'economicIssuesDesc',//显示值// editable: false,// panelHeight:102,//控制下拉框高度// data: economicIssuesNoArryData, //json数据// required: false// }// }// },{field: 'url', hidden:true }]],onClickRow: function (rowIndex, rowData) {},onCheck: function (rowIndex, rowData) {},onUncheck: function (rowIndex, rowData) {},onLoadSuccess:function (data){// var rows = $(this).datagrid("getRows");// //使等级显示为下拉框// for(var index=0;index<rows.length;index++){// $(this).datagrid("beginEdit", index);// if($(this).datagrid("getEditor",{index:index,field:"economicIssuesNo"}).target.combobox('getValue') == ''){// $(this).datagrid("getEditor",{index:index,field:"economicIssuesNo"}).target.combobox('setValue', "空");// }// }}});
其中economicIssuesNoArry是下拉框里list值,可以是写死也可以是动态ajax获取,这里的方法重点是select的id,这个id是拼凑出来的,由上个datagrid里的consumingNo(唯一主键)构成
//初始化领用单号经济事项function initEconomicIssues(obj){if (economicIssuesNoArry.length > 0) {var html = '<select id="economicIssuesSelect' + obj.consumingNo + '"' + 'class="easyui-combobox" style="width:250px; required="true">';for (var i = 0; i < economicIssuesNoArry.length; i++) {html += '<option value="' + economicIssuesNoArry[i].economicIssuesNo + '">' + economicIssuesNoArry[i].description + '</option>'}html += "</select>";return html;} else {//支出类别var issuesCategory = $("#issuesCategory").val();//支出项目var issuesClass = $("#issuesClass").val();//预算中心var budgetCenter = $('#budgetCenter').val();//机构代码var finBranchCode = $('#responsibleFinBranchCode').val();var html = "";//查询经济事项$.ajax({type: 'post',// url: '${ctx}economicIssuesTbl/getEconomicIssuesNo.do?businessBook=${businessBook}&billType=${billType}' + '&issuesCategory=' + issuesCategory + '&issuesClass=' + issuesClass,url: '${ctx}economicIssuesSet/getExpenseEconomicIssues.do?isExpensesApply=Y&businessBook=${businessBook}&billType=13&budgetCenter='+ budgetCenter + '&issuesCategory=' + issuesCategory+ '&finBranchCode=' + finBranchCode+ '&issuesClass=' + issuesClass,dataType: 'json',async: false,success: function (result) {var resData = result.rows;for (var i = 0; i < resData.length; i++) {if (resData[i].description.search("餐饮、茶歇") != -1) {economicIssuesNoArry.push(resData[i]);}if (resData[i].description.search("杂费") != -1) {economicIssuesNoArry.push(resData[i]);}}html = '<select id="economicIssuesSelect' + obj.consumingNo + '"' + 'class="easyui-combobox" style="width:250px; required="true">';for (var i = 0; i < economicIssuesNoArry.length; i++) {html += '<option value="' + economicIssuesNoArry[i].economicIssuesNo + '">' + economicIssuesNoArry[i].description + '</option>'}html += "</select>";}});return html;}}
获取datagird里的下拉框选中的value和text
这里只需获取选中的rows数组然后通过下标获取对应的行数据,最后通过拼凑id值再使用
$(“#id option:selected”).val();
方法获取select选中的值和value
var rows = $('#queryPcpTable').datagrid('getSelections');var num = rows.length;......//已选中的领用单增加行var rowObj = rows[i];//获取领用事项的Idvar elementText = "#" + "economicIssuesSelect" + rowObj.consumingNo + " option:selected";//获取领用事项描述var economicIssuesDesc = $(elementText).text();//获取领用事项novar economicIssuesNo = $(elementText).val();相关文章:
Easyui里的datagrid嵌入select下拉框
问题: 想使用datagird里嵌入select下拉框,并在提交form表单时获取datagrid选中的每行数据里的每个下拉框选中的值。 解决方案: 其中economicIssuesSelect使用下拉框,重点关注 initEconomicIssues(row)方法。这里的方法需要传递ro…...
计算机专业毕业设计项目推荐03-Wiki系统设计与实现(JavaSpring+Vue+Mysql)
Wiki系统设计与实现(JavaSpringVueMysql) **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设…...
微服务的艺术:构建可扩展和弹性的分布式应用
文章目录 什么是微服务架构?微服务的设计原则1. 基于业务边界划分服务2. 松耦合和强内聚3. 自动化测试和部署4. 监控和日志5. 弹性设计 微服务的实施细节1. 服务发现示例代码:使用Consul进行服务发现 2. 负载均衡示例代码:Nginx配置负载均衡 …...
在PHP8中对数组进行排序-PHP8知识详解
在php8中,提供了丰富的排序函数,可以对数组进行排序操作。常见的排序函数如下几个:sort() 函数、rsort() 函数、asort() 函数、arsort() 函数、ksort() 函数、krsort() 函数、natsort()函数和natcascsort()函数。 1、sort() 函数:…...
Redis混合模式持久化原理
前言 前面文章中我们也介绍过Redis的持久化方式有两种:rdb持久化和aof持久化,具体详情可查看之前文章redis持久化。rdb持久化还是aof持久化它们都有各自的缺点。 rdb和aof缺点 rdb持久化:由于是定期对内存数据快照进行持久化,因此…...
《BPF Performance Tools —— 洞悉Linux系统和应用性能》学习笔记 —— 第一章 介绍(2)
接前一篇文章:《BPF Performance Tools —— 洞悉Linux系统和应用性能》学习笔记 —— 第一章 介绍(1) 1.2 Tracing、Snooping、Sampling、Profiling和Observability是什么? 这些都是用于对分析技术和工具进行分类的术语。 Trac…...
【计算机网络】网络编程接口 Socket API 解读(7)
Socket 是网络协议栈暴露给编程人员的 API,相比复杂的计算机网络协议,API 对关键操作和配置数据进行了抽象,简化了程序编程。 本文讲述的 socket 内容源自 Linux man。本文主要对各 API 进行详细介绍,从而更好的理解 socket 编程。…...
crypto++下载、安装(VS2017)及加解密使用
crpto 下载按个人喜好下载,我使用了图中框选的8.8.0 Release.解压 安装打开修改以适应本机配置整理至标准库 调用加解密使用 Crypto(也称为Crypto Library或Crypto STL)是一个C密码学库,它提供了各种密码学算法和安全编程工具&…...
R语言画图
简单记录一下 plot(lad_profile_relative$lad, lad_profile_relative$height, type"l", lwd1.5, xlabexpression(paste("LAD ", "(", m^2, m^-3, ")" )), ylab"Height (m)")X轴数据, Y轴数据 type, 标记类型 lw…...
redis 核心数据结构
一、简述 redis是一个开源的使用C语言编写的一个kv存储系统,是一个速度非常快的非关系远程内存数据库。它支持包括String、List、Set、Zset、hash五种数据结构。 除此之外,通过复制、持久化和客户端分片等特性,用户可以很方便地将redis扩展…...
RabbitMQ消息可靠性(一)-- 生产者消息确认
前言 在项目中,引入了RabbitMQ这一中间件,必然也需要在业务中增加对数据安全性的一层考虑,来保证RabbitMQ消息的可靠性,否则一个个消息丢失可能导致整个业务的数据出现不一致等问题,对系统带来巨大的影响,…...
9 种方法使用 Amazon CodeWhisperer 快速构建应用
Amazon CodeWhisperer 是一款很赞的生成式人工智能编程工具。自从在工作中使用了 CodeWhisperer,我发现不仅代码编译的效率有所提高,应用开发的工作也变得快乐起来。然而,任何生成式 AI 工具的有效学习都需要初学者要有接受新工作方式的心态和…...
性能测试-性能工程落地的4个阶段(21)
性能工程按照不同的内容和目的划分为4个阶段,分别是线下单系统压测分析阶段、线下全链路压测分析阶段、生产只读业务压测及容量评估阶段、生产读写业务全链路压测及容量评估阶段。(也可以理解为一个企业性能测试体系的发展阶段) 线下单系统压测分析阶段 针对单系统的性能…...
小程序 navigateBack 携带参数返回的三种方式(详细)
如果觉着主图好看,点个赞,你早晚也会看到这么好看的景色! 第一种方式 getCurrentPages 获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。不要尝试修改页面栈,会导致路由以及页面状态错误。不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page …...
通过内网穿透实现远程连接群晖Drive,轻松实现异地访问群晖NAS
文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…...
vue3 + vite常用工具
1. plop 1.1 安装 yarn add plop -D1.2 使用 1.2.1 package.json 配置脚本命令 "scripts": {"dev": "vite --mode dev","build": "vue-tsc --noEmit && vite build","serve": "vite preview"…...
Vue框架分享与总结
总结开发中最常用的vue语法,以及对特定语法的理解。vue官网 文章目录 一、创建vue项目1、使用开发工具创建2、使用命令行创建3、vue框架结构4、Vue文件结构 二、Vue 常用模板语法1、v-if、v-show2、v-for3、v-on4、v-bind5、v-model 三、组件通信1、父组件给子组件传…...
声音生成评价指标——使用声音分类模型评价生成声音质量(基于resnetish、VGGish、AlexNet)
文章目录 引言正文数据预处理将wav转成log-mel频谱图进行保存创建dataset类保存数据 模型定义模型训练过程训练代码定义loss为nan从AlexNet到ResNetloss上下剧烈波动——使用学习率衰减策略学习率调整——根据准确率来调整学习率数据处理问题 模型的测试 总结 引言 这篇文章主要…...
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 六)
AppStorage:应用全局的UI状态存储 AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。 和LocalStorage不同的是,LocalStorage是页面级的&…...
SPA首屏加载速度慢
什么是首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首屏加载可以说是用…...
【悬疑小说推荐】美女神探破奇案:《索女神探之银河谋杀法》
书名:《索女神探之银河谋杀法》 作者:追月逐花 出版社:贵州人民出版社 地址http://e.dangdang.com/products/1901196522.html 神秘女郎接连遇害,尸体均遭到严重损毁;神秘画像暗藏玄机,画中模特竟然是一具女尸。循着线索追查&am…...
TI-92 Plus计算器超频改造与硬件分析
1. TI-92 Plus图形计算器硬件分析与超频改造1.1 设备概述与历史背景TI-92 Plus是德州仪器(Texas Instruments)于1999年推出的图形计算器产品,采用摩托罗拉68K系列MC68SEC000处理器作为核心运算单元。该设备采用QWERTY全键盘设计,配备大尺寸LCD显示屏&…...
【仿真】【具身智能】云端低成本畅玩Isaac Lab:抢占式实例部署实战
1. 为什么选择云端抢占式实例部署Isaac Lab 第一次接触Isaac Lab时,我和大多数开发者一样被本地部署的高门槛吓退了。一张RTX 3090显卡就要上万元,更别提配套的CPU和内存配置要求。后来尝试过VNC远程连接方案,结果画面卡顿得像在看PPT&#x…...
6ES5943-7UB21西门子中央处理器模块
型号全称:西门子 SIMATIC S5-115U CPU 943B 中央处理器模块订货号:6ES5943-7UB21一、产品特性属于SIMATIC S5-115U系列中型 PLC 中央处理单元型号为CPU 943B,自带48KB RAM工作内存配备2 路 TTY 通信接口,支持编程器 / 上位机连接带…...
Dify + Weaviate/Qdrant混合重排架构实践(支持动态权重调度、Fallback降级与A/B测试埋点)
第一章:Dify重排序架构的核心设计哲学Dify 的重排序(Reranking)模块并非简单叠加于检索之后的后处理步骤,而是在整个 LLM 应用生命周期中承担语义对齐、意图强化与可信度校准三重使命的设计原语。其核心哲学可凝练为:*…...
htcw_esp_panel:ESP32嵌入式显示与触摸的编译期硬件抽象框架
1. htcw_esp_panel:面向嵌入式显示与人机交互的全栈式硬件抽象层htcw_esp_panel 是一个专为 ESP32 系列 SoC(包括 ESP32-S2/S3/C3/P4)设计的轻量级、可配置化硬件抽象库。它并非简单的驱动封装,而是一套覆盖显示、触摸、按键、SD …...
卡梅德生物技术快报|高亲和力 VHH 抗体的快速筛选:磁珠直接偶联液相法的技术实现
摘要针对传统方法难以实现高亲和力 VHH 抗体的快速筛选这一行业痛点,本文阐述了基于磁珠直接偶联的液相筛选法在高亲和力 VHH 抗体的快速筛选中的技术原理、核心实验步骤及应用优势。该方法通过碳化二亚胺法实现半抗原与磁珠的直接共价偶联,消除载体蛋白…...
高效PDF处理:PDF补丁丁的全场景应用指南
高效PDF处理:PDF补丁丁的全场景应用指南 【免费下载链接】PDFPatcher PDF补丁丁——PDF工具箱,可以编辑书签、剪裁旋转页面、解除限制、提取或合并文档,探查文档结构,提取图片、转成图片等等 项目地址: https://gitcode.com/Git…...
STM32F103ZET6通过IIC驱动VL53L0X实现多模式激光测距
1. VL53L0X激光测距模块初探 第一次拿到VL53L0X这个小玩意儿时,我完全被它的精准度震惊了。这个比硬币大不了多少的模块,居然能实现毫米级的测距精度!VL53L0X是ST公司推出的新一代飞行时间(ToF)激光测距传感器,它采用940nm不可见激…...
革命性角色生成引擎Pony V7:重新定义AI驱动的视觉创作范式
革命性角色生成引擎Pony V7:重新定义AI驱动的视觉创作范式 【免费下载链接】pony-v7-base 项目地址: https://ai.gitcode.com/hf_mirrors/purplesmartai/pony-v7-base 副标题:解决数字艺术行业5大核心难题——从风格割裂到高分辨率输出的全链路突…...
