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();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/138345.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言基础知识点(八)联合体和大小端模式

以下程序的输出是&#xff08;&#xff09; union myun {struct { int x, y, z;} u;int k; } a; int main() {a.u.x 4;a.u.y 5;a.u.z 6;a.k 0;printf("%d\n", a.u.x); } 小端模式 数据的低位放在低地址空间&#xff0c;数据的高位放在高地址空间 简记&#xff…

微软(TTS)文本转语音服务API实现

此博客实现与java实现微软文本转语音&#xff08;TTS&#xff09;经验总结_java tts_${简简单单}的博客-CSDN博客之上&#xff0c;首先感谢博客源码的提供&#xff0c;本人在上面添加了一些详细的注释&#xff0c;方便大家跟好的理解和使用&#xff0c;毕竟我已经用原文调试了一…

云原生Kubernetes:pod进阶之资源管理与探针

目录 一、理论 1.pod的资源限制 2.健康检查&#xff08;探针Probe) 3.示例 二、实验 1.pod的资源限制 2.健康检查&#xff08;探针Probe) 三、问题 1.生成资源报错 2.api版本错误 3.echo N>/proc/sys/vm/drop_caches如何实现清理缓存 4.生成启动退出容器报错 5…

java版Spring Cloud+Mybatis+Oauth2+分布式+微服务+实现工程管理系统

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…

python教程:使用gevent实现高并发并限制最大并发数

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 import time import gevent from gevent.pool import Pool from gevent import monkey # 一&#xff0c;定义最大并发数 p Pool(20) # 二&#xff0c;导入gevent…

【Docker】华为云服务器安装 Docker 容器

简介 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。 容器是完全使用沙箱机…

知识图谱基本工具Neo4j使用笔记 五 :APOC插件安装及简单应用

文章目录 一、使用场景二、系统说明三、配置安装1. 插件下载2. 文件下载说明3. 版本对应4. 安装位置5. 修改配置文件6. 注意问题7. web端启动&#xff1a;测试 四、简单应用1. 编辑距离2. 基于编辑距离的相似度3. 模糊匹配 一、使用场景 APOC&#xff08;Awesome Procedures o…

基于movie lens-100k数据集的协同过滤算法实现

基于movie lens-100k数据集的协同过滤算法实现 数据集处理 基于用户的协同过滤算法的实现 基于物品的协同过滤算法的实现 数据集处理 import pandas as pdu_data pd.read_csv(D:/PyCharmWorkSpace/ml-100k/ml-100k/u.data) u_genre pd.read_csv(D:/PyCharmWorkSpace/ml-10…

如何批量为文件夹命名

如果你想要命名一些这样名字具有规律性的文件夹&#xff0c;当文件的数量增多&#xff0c;一个一个命名是非常耗费时间的。很容易想到&#xff0c;如果使用EXCEL&#xff0c;只需往下拉&#xff0c;就能很轻松的拉出1到5。那么&#xff0c;我们如何利用EXCEL来对文件夹进行快速…

LazadaAPI接口解析,实现获得lazada商品评论列表

Lazada是一个流行的跨境电商平台&#xff0c;它提供了API接口供开发者使用。要获取Lazada商品评论列表&#xff0c;您需要使用Lazada API接口并进行相应的请求。 以下是使用Lazada API接口获取商品评论列表的示例代码&#xff08;使用Python编写&#xff09;&#xff1a; pyth…

【Linux】系统编程线程互斥与同步(C++)

目录 【1】线程互斥 【1.1】进程线程间的互斥相关背景概念 【1.2】互斥量mutex 【1.3】互斥量实现原理探究 【1.4】RAII的加锁风格 【2】可重入VS线程安全 【2.1】概念 【2.2】常见的线程不安全的情况 【2.3】常见的线程安全的情况 【2.4】常见不可重入的情况 【2.5…

无线定位中TDOA时延估计算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ...................................................................figure; plot(P1x,P1y…

【Graph Net学习】LINE实现Graph Embedding

一、简介 LINE (Large-scale Information Network Embedding,2015) 是一种设计用于处理大规模信息网络的算法。它主要的目标是在给定的大规模信息网络中学习高质量的节点嵌入&#xff0c;并尽量保留网络中信息的丰富性。其具体的表现为在一个低 维空间里以向量形式表示网络中的…

华为云云耀云服务器L实例评测|华为云上安装监控服务Prometheus三件套安装

文章目录 华为云云耀云服务器L实例评测&#xff5c;华为云上试用监控服务Prometheus一、监控服务Prometheus三件套介绍二、华为云主机准备三、Prometheus安装四、Grafana安装五、alertmanager安装六、三个服务的启停管理1. Prometheus、Alertmanager 和 Grafana 启动顺序2. 使用…

mysql workbench常用操作

1、No database selected Select the default DB to be used by double-clicking its name in the SCHEMAS list in the sidebar 方法一&#xff1a;双击你要使用的库 方法二&#xff1a;USE 数据库名 2、复制表名&#xff0c;字段名 3、保存链接

折线图geom_line()参数选项

往期折线图教程 图形复现| 使用R语言绘制折线图折线图指定位置标记折线图形状更改 | 绘制动态折线图跟着NC学作图 | 使用python绘制折线图 前言 我们折线的专栏推出一段时间&#xff0c;但是由于个人的原因&#xff0c;一直未进行更新。那么今天&#xff0c;我们也参考《R语…

Kafka-UI

有多款kafka管理应用&#xff0c;目前选择的是github上star最多的UI for Apache Kafka。 关于 To run UI for Apache Kafka, you can use either a pre-built Docker image or build it (or a jar file) yourself. UI for Apache Kafka is a versatile, fast, and lightweight…

关于ABB机器人的IO创建和设置

首先要链接网线&#xff0c;请求写权限 关于ABB机器人的默认地址位10有的是63.31看你硬接线 ABB机器人分配好信号机器人控制柜要重启 可以把机器人分配的信号导出为EIO 类似与发那科机器人IO

Spring底层原理之 BeanFactory 与 ApplicationContext

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Spring底层原理 一、 BeanFactory 与 Appli…

ChatGPT追祖寻宗:GPT-3技术报告要点解读

论文地址&#xff1a;https://arxiv.org/abs/2005.14165 往期相关文章&#xff1a; ChatGPT追祖寻宗&#xff1a;GPT-1论文要点解读_五点钟科技的博客-CSDN博客ChatGPT追祖寻宗&#xff1a;GPT-2论文要点解读_五点钟科技的博客-CSDN博客 本文的标题之所以取名技术报告而不是论文…