Easyui里的datagrid嵌入select下拉框

2023-09-15 17:39:57

问题:
想使用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];
                //获取领用事项的Id
                var elementText = "#" +  "economicIssuesSelect" + rowObj.consumingNo + " option:selected";
                //获取领用事项描述
                var economicIssuesDesc = $(elementText).text();
                //获取领用事项no
                var economicIssuesNo =   $(elementText).val();

更多推荐

【李沐深度学习笔记】按特定轴求和

课程地址和说明线性代数实现p4本系列文章是我学习李沐老师深度学习系列课程的学习笔记,可能会对李沐老师上课没讲到的进行补充。这节就算之前内容的复习,后面以截图形式呈现这节课就简单说明以下,axis为0是行,1是列,为0是每一列按行往下加和,为1就是每一行按列往下加和(SUM)按某个维度求和就把某个维度去掉后求和如果保留维

Android tinker升级之路分析

前言目前app线上的tinker版本为1.9.14.19,在最近的几个版本技术需求中,我们希望对tinker尝试进行升级,并对内部封装的tinker的包装sdk进行升级。升级过程中的一些热修流程和记录如下。热修耗时时长分析测试中,所有测试热修基本均可生效,但是对补丁合成生效时间有要求。耗时具体体现在:tinker初始化

二分类问题的解决利器:逻辑回归算法详解(一)

文章目录🍋引言🍋逻辑回归的原理🍋逻辑回归的应用场景🍋逻辑回归的实现🍋引言逻辑回归是机器学习领域中一种重要的分类算法,它常用于解决二分类问题。无论是垃圾邮件过滤、疾病诊断还是客户流失预测,逻辑回归都是一个强大的工具。本文将深入探讨逻辑回归的原理、应用场景以及如何在Python中实现它。🍋逻辑回归的原理逻辑回归

Rust解决Bug错误“error: future cannot be sent between threads safely”

介绍:在开发过程中,我们可能会遇到错误消息:“error:futurecannotbesentbetweenthreadssafely”。这个错误通常是由于使用了不可发送(notSend)的类型引起的,尤其是std::sync::MutexGuard类型。这意味着我们不能将一个互斥锁(mutex)在不同线程间进行传递,

在游戏行业中需要选择高防服务器么?

对于飞速发展的互联网,导致攻击成本越来越低,最明显的就是游戏行业,很多游戏公司都遭受此类网络攻击,所以更需要选择高防服务器,让防御功能变得更加靠谱,游戏公司的高防服务器应该如何选择呢?今天就让小编来讲一讲吧!服务器配置要高。游戏行业和普通的中小型企业对于服务器的需求是不一样的,要保障游戏页面的流畅,这对于玩家来说是非常

QT-day2

1、完善登录框头文件widget.h#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>#include<QMessageBox>//消息对话框类头文件#include<QDebug>#include<QPushButton>#include"second.h"QT_BEGIN

Linux学习之gdb的使用

目录1.Debug与Release模式如何证明debug是可以被调试的?2.Linux调试器-gdb使用gdb调试的指令指令一:list(l)查看源代码编辑​编辑命令二:run(r)运行程序命令三:breakpoint(b)设置断点命令四:infobreak(info)查看断点命令五:deletebreakpoint(

基于Java的设计模式 - 代理模式

代理模式是一种使用代理对象来执行目标对象的方法并在代理对象中增强目标对象方法的一种设计模式。简单来讲就是在不修改目标对象的基础上,增强主业务逻辑的设计模式。代理模式基本可分为三种静态代理JDK动态代理CGLIB动态代理上述简单分就是静态和动态代理,静态代理即程序运行之前已创建了代理类,动态代理是程序运行时通过反射机制动

幸福里基于 Flink & Paimon 的流式数仓实践

摘要:本文整理自字节跳动基础架构工程师李国君,在StreamingLakehouseMeetup的分享。幸福里业务是一种典型的交易、事务类型的业务场景,这种业务场景在实时数仓建模中遇到了诸多挑战。本次分享主要介绍幸福里业务基于Flink&Paimon构建流式数仓的实践经验,从业务背景、流批一体数仓架构、实践中遇到的问题

新能源汽车驱动电机的基本知识

学习目标:了解电机的基本知识。能力目标:培养学生搜集和整理相关资料的能力。素质目标:培养学生良好的职业素养。额定电店.在夫见定条件下电池工作的*于佳电压知识准备术语和定义。(1)驱动电机系统通过有效的控制策略将动力蓄电池提供的直流电转化为交流实现电机的正转以及反转控制。在减速/制动时将电机发出的交流电转化为直流电,将能

APEX数据源加载实现Excel表数据导入及自定义存储过程

在APEX应用程序中会涉及到数据加载,说白了就是导入导出数据到数据库中,这里就以Excel导入数据到TEST_DATA_WXX表为例,来学习共享组件数据源数据加载定义1第一步先导出一个数据模板进入《王小小鸭的学习demo》打开【用户管理】-【操作】-【下载】-【Excel】下载后的Excel数据表是这样的↓2.建表TE

热文推荐