EasyUI弹出框行编辑,通过下拉框实现内容联动

EasyUI弹出框行编辑,通过下拉框实现内容联动

需求

实现用户支付方式配置,当弹出框加载出来的时候,显示用户现有的支付方式,datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充;
在这里插入图片描述
点击新增:新增一个空白行
选择结算条款编码:后面的结算方式等信息自动带出来
点击删除:此行删除

实现

html代码(只列举弹出框部分)

<div class="easyui-dialog" id="configDialog" title="客户条款配置" style="width: 800px;height:400px; padding:2px 2px;" data-options="iconCls:'icon-save',closed : true,modal: true,maximizable:true,onResize:function(){$(this).dialog('center');},buttons: [{text:'保存',iconCls:'icon-ok',handler:function(){alert('ok');}},{text:'取消',iconCls:'icon-no',handler:function(){$('#configDialog').dialog('close');}}]"><div><table style="width:100%;height:322px;" id="configTable" class="easyui-datagrid"data-options="singleSelect:true,selectOnCheck:true,checkOnSelect:true,fit:false,striped:false,autoRowHeight:false,pagination:false,toolbar: [{text:'新增',iconCls:'icon-add',handler:function(){appendRow();}}]"><thead><tr><th field="id" checkbox="true"></th><th data-options="field:'code',editor:{type:'combobox',options:{valueField:'id',textField:'code',url:'${ctx}/json/PoPaymentJsonController/getAllTipsList',onSelect: refreshRow}}" width="150" >结算条款编码</th><th data-options="field:'settlementTypeName'" width="150" >结算方式</th><th data-options="field:'startTypeName'" width="150" >结算起始日期</th><th data-options="field:'period'" width="150" >结算天数</th><th data-options="field:'remark'" width="100" formatter="detailFormatter">操作</th></tr></thead></table></div>
</div>

JS代码

<%-- 配置 --%>function config(index){const row = $('#dg').datagrid('getRows')[index]const queryParams = {id:row.id}$("#configTable").datagrid({url : '${ctx}/json/PoPaymentJsonController/queryCustomerPaymentConfigMap',queryParams : queryParams});$('#configDialog').dialog('open')}<%-- 添加一行 --%>function appendRow(){let dg = $('#configTable');dg.datagrid('appendRow',{code:'',settlementTypeCode:'',startTypeCode:'',period:''});// 获取新增的行的索引let index = dg.datagrid('getRows').length - 1;dg.datagrid('beginEdit', index);}<%-- 删除一行 --%>function deleteRow(index){let dg = $('#configTable');let row = dg.datagrid('getRows')[index];if(row.id){deleteRows.push(row)}dg.datagrid('deleteRow', index);}<%-- 填充行 --%>function refreshRow(row){console.log('row',row);// 使用closest方法向上查找最近的td元素let $table = $(this).closest('table');// 获取tdlet $td = $table.closest('td');$td.click();const dg = $('#configTable');const selected = dg.datagrid('getSelected');const rowIndex = dg.datagrid('getRowIndex',selected);// dg.datagrid('endEdit', rowIndex);// dg.datagrid('updateRow',{//     index:rowIndex,//     row:row// });dg.datagrid('deleteRow',rowIndex);dg.datagrid('insertRow',{index:rowIndex,row:row})}

难点解析

当点击选中下拉框之后需要更新当前行,但是经过测试,使用datagridonClickRow或者是onClickCell均不起作用,原因就是我们点击的是单元格中的元素

解决思路

1、通过F12中查看dom结构,然后获取到原本datagrid的td元素;
2、通过td的点击事件结合datagridselectOnCheck:true,checkOnSelect:true 使得编辑的行选中
3、通过选中行数据selected结合datagridgetRowIndex方法获取到编辑行索引index
4、通过index更新当前行数据

实现中的问题

在执行步骤4的时候发现,如果是使用insertRow方式,会在页面中停留一个下拉选面板异常
在这里插入图片描述
这里的原因就是。当我们选中之后,执行了更新行,再次之前没有执行编辑器editor的结束,导致此错误;
解决方案有2种

  1. 先结束editor的编辑,然后在更新

dg.datagrid(‘endEdit’, rowIndex);
dg.datagrid(‘updateRow’,{
index:rowIndex,
row:row
});

  1. 直接删除当前行,然后在insertRow

dg.datagrid(‘deleteRow’,rowIndex); dg.datagrid(‘insertRow’,{
index:rowIndex,
row:row })

看大家实际需要,第一种方式,因为我在refreshRow种调用了td的点击事件$td.click();,因此如果多行存在的话,每行都会被选中;所有都选中全选择没有打钩
在这里插入图片描述

第二中方式则一行都不会被选中,我采用的是第二种方式,大家可以根据需要实际需要选择。
在这里插入图片描述

第二个难点就是需要从当前选中的下拉框获取到编辑行,这里发现conbobox在datagrid中渲染的元素为

<td field="code"><div style="width: 149px;" class="datagrid-cell datagrid-cell-c4-code datagrid-editable"><table border="0" cellspacing="0" cellpadding="1"><tbody><tr><td><input type="text" class="datagrid-editable-input combobox-f combo-f textbox-f" style="display: none;"><span class="textbox combo" style="width: 147px; height: 20px;"><span class="textbox-addon textbox-addon-right" style="right: 0px;"><a href="javascript:void(0)" class="textbox-icon combo-arrow" icon-index="0" style="width: 18px; height: 20px;"></a></span><input type="text" class="textbox-text validatebox-text" autocomplete="off" placeholder="" style="margin-left: 0px; margin-right: 18px; padding-top: 3px; padding-bottom: 3px; width: 121px;"><input type="hidden" class="textbox-value" name="" value="9"></span></td></tr></tbody></table></div>
</td>因此这里获取到td之后再执行点击事件
// 使用closest方法向上查找最近的td元素
let $table = $(this).closest('table');// 获取td
let $td = $table.closest('td');
$td.click();
const dg = $('#configTable');
const selected = dg.datagrid('getSelected');// 获取到当前行
const rowIndex = dg.datagrid('getRowIndex',selected);

以上希望能对大家有所帮助;如果大家有更好的办法欢迎留言讨论

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

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

相关文章

ssm079基于SSM框架云趣科技客户管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;客户管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本客户管理系统就是在这…

PICO+Unity 用手柄点击UI界面

如果UI要跟随头显&#xff0c;可将Canvas放置到XR Origin->Camera Offset->Main Camera下 1.Canvas添加TrackedDeviceGraphicRaycaster组件 2.EventSystem移动默认的Standard Input Module&#xff0c;添加XRUIInputModule组件 3.&#xff08;可选&#xff09;设置射线可…

apt镜像源制作-ubuntu22.04

# 安装必要的软件 sudo apt-get install -y apt-mirror # 编辑/etc/apt/mirror.list,添加以下内容 set base_path /var/spool/apt-mirror # 指定要镜像的Ubuntu发布和组件-null dir jammy-updates main restricted universe multiverse # 镜像的Ubuntu发布和组件的URL-n…

springboot初体验

目录 环境 controller 修改端口号 更改banner图标 运行结果 最核心的:自动装配 环境 jdk17springboot3.3.5maven3.8.2 controller controller层和启动类同级 package com.example.demo.controller; ​ import org.springframework.web.bind.annotation.RequestMapping;…

Q:警告无法解释导入PIL Pylance(reportMisssingIMports)

问题显示&#xff1a; 解决方法&#xff1a; 1.确认安装 Pillow&#xff1a;在 VS Code 的终端中运行以下命令&#xff0c;以确保环境中安装了 Pillow pip install pillow2.选择正确的解释器&#xff1a;在 VS Code 中&#xff0c;按下 CtrlShiftP&#xff0c;输入并选择 “P…

python中常见的8种数据结构之一数组的应用

在Python中&#xff0c;数组是一种常见的数据结构&#xff0c;用于存储一系列相同类型的元素。在实际应用中&#xff0c;数组可以用于解决各种问题。 以下是数组在Python中的一些常见应用&#xff1a; 1. 存储和访问数据&#xff1a;数组可以用于存储和访问一组数据。可以通过…

网络安全——下载并在kali虚拟机上启动Cobalt Strike

目录 一、下载 二、上传文件到kali虚拟机 三、启动服务端 四、启动客户端 一、下载 CobaltStrike4.8汉化版带插件-CSDN博客 下载并解压后 二、上传文件到kali虚拟机 1、打开并运行kali虚拟机&#xff0c;查看kali的ip地址 2、打开xshell&#xff0c;新建连接&#xff0c;连…

用 Python 从零开始创建神经网络(四):激活函数(Activation Functions)

激活函数&#xff08;Activation Functions&#xff09; 引言1. 激活函数的种类a. 阶跃激活功能b. 线性激活函数c. Sigmoid激活函数d. ReLU 激活函数e. more 2. 为什么使用激活函数3. 隐藏层的线性激活4. 一对神经元的 ReLU 激活5. 在隐蔽层中激活 ReLU6. ReLU 激活函数代码7. …

22.oop-strust与class

OOP是什么&#xff1a;oop 是面向对象编程,面向对象编程是一种计算机编程架构, OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或 对象组、合而成。 OOP有什么特性&#xff1a; 1、封装性&#xff1a;也称为信息隐藏&#xff0c;就是将一个类的使用和实现分开…

【Linux】ubuntu安装图形化界面步骤

一、ubuntu 安装桌面环境 1、更新软件包列表&#xff08;命令↓&#xff09; sudo apt update 2、安装桌面环境GNOME&#xff08;命令↓&#xff09; sudo apt install ubuntu-desktop 3、安装完成后需要重启服务器&#xff08;服务器重启命令↓&#xff09; sudo reboot 二、…

【Android】轮播图——Banner

引言 Banner轮播图是一种在网页和移动应用界面设计中常见的元素&#xff0c;主要用于在一个固定的区域内自动或手动切换一系列图片&#xff0c;以展示不同的内容或信息。这个控件在软件当中经常看到&#xff0c;商品促销、热门歌单、头像新闻等等。它不同于ViewPgaer在于无需手…

Vue2 doc、excel、pdf、ppt、txt、图片以及视频等在线预览

Vue2 doc、excel、pdf、ppt、txt、图片等在线预览 安装使用目录结构直接上代码src\components\FileView\doc\index.vuesrc\components\FileView\excel\index.vuesrc\components\FileView\img\index.vuesrc\components\FileView\pdf\index.vuesrc\components\FileView\ppt\index…

[OpenGL]使用OpenGL实现硬阴影效果

一、简介 本文介绍了如何使用OpenGL实现硬阴影效果&#xff0c;并在最后给出了全部的代码。本文基于[OpenGL]渲染Shadow Map&#xff0c;实现硬阴影的流程如下&#xff1a; 首先&#xff0c;以光源为视角&#xff0c;渲染场景的深度图&#xff0c;将light space中的深度图存储…

微服务是什么 SpringCloud是什么

微服务是什么 SpringCloud是什么 一、微服务概述二、微服务架构三、单体架构四、分布式架构五、SpringCloud概述六、SpringBoot和 SpringCloud的区别与联系七、SpringCloud版本选择 一、微服务概述 微服务&#xff08;MicroServices&#xff09;最初是由 Martin Fowler 于 2014…

K8S node节点没有相应的pod镜像运行故障处理办法

查看从节点状态 kubectl describe node k8s-node1以下是报错提示 解决办法 需要处理node1节点上的磁盘空间&#xff0c;磁盘空间需要在85%内 处理后的状态 处理正常

CSS教程(四)- 字体

1、尺寸单位 px 像素单位% 百分比&#xff0c;参照父元素对应属性的值进行计算em 字体尺寸单位&#xff0c;参照父元素的字体大小计算&#xff0c;1em16pxrem字体尺寸单位,参照根元素的字体大小计算&#xff0c;1rem16px 2、字体属性 介绍 CSS Fonts (字体)属性用于定义字体…

使用storcli工具配置RAID,收藏这一篇就够了

正文共&#xff1a;1888 字 28 图&#xff0c;预估阅读时间&#xff1a;2 分钟 前文&#xff08;怎么把银河麒麟系统装进U盘&#xff1f;&#xff09;提到&#xff0c;因为国产服务器固件暂不支持直接配置RAID&#xff0c;所以需要使用storcli这个工具来操作。今天就从RAID配置…

Three.js 搭建3D隧道监测

Three.js 搭建3D隧道监测 Three.js 基础元素场景scene相机carema网络模型Mesh光源light渲染器renderer控制器controls 实现3d隧道监测基础实现道路实现隧道实现多个摄像头点击模型进行属性操作实现点击模型发光效果 性能监视器stats引入使用 总结完整代码 我们将通过three.js技…

漫谈分布式唯一ID

文章目录 本系列前言UUIDDB自增主键Redis incr命令号段模式雪花算法 本系列 漫谈分布式唯一ID&#xff08;本文&#xff09;分布式唯一ID生成&#xff08;二&#xff09;&#xff1a;leaf分布式唯一ID生成&#xff08;三&#xff09;&#xff1a;uid-generator分布式唯一ID生成…

CSS教程(七)- 背景

介绍 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 1 背景颜色 属性名&#xff1a;background-color 作用&#xff1a;指定HTML元素的背景色。 取值&#xff1a;英文颜色、16进制、rgb、rgba、transparent&#xff08;一般为透明&#…