easyui主表子表维护页面
easyui主表子表维护页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- <#include "common.html"/> --><link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="http://www.jeasyui.net/Public/js/jquery.min.js"></script><script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script><style>html,body {padding: 0;margin: 0;height: 99%;}#basicInfoTable {table-layout: fixed;width: 90%;height: auto;margin-left: 5%;margin-top: 1%;}#accountTable {table-layout: fixed;width: 90%;height: auto;margin-left: 5%;margin-top: 1%;}#basicInfoTable td {height: 40px;border: 1px solid #e2e2e2;}#basicInfoTable .tdTitle {background-color: #fafafa;width: 15%;text-align: center;}#accountTable td {height: 40px;border: 1px solid #e2e2e2;}#accountTable .tdTitle {background-color: #fafafa;width: 15%;text-align: center;}.title {display: block;text-align: center;font-weight: bold;font-size: 24px;}.headerFont {font-size: 12px;}.form-buttons {text-align: left;margin-top: 25px;padding-right: 656px;}.form-buttons a {display: inline-block;padding: 2px 6px;background-color: #b7d2ff;text-align: center;text-decoration: none;border-radius: 3px;font-size: 12px;margin-right: 10px;transition: all 0.3s ease-in-out;}.form-buttons a:hover {background-color: #3399cc;}</style><div id="form-buttons" class="form-buttons" style="margin-top: 1%;margin-left: 5%"><a href="#" class="easyui-linkbutton" id="submitFormBtn" onclick="submitForm()">保存</a><a href="#" class="easyui-linkbutton" id="cancelSaveBtn" onclick="cancelSave()">返回</a></div><div><span class="title" style="margin-top: 1%">客商信息维护</span></div><form id="customerForm" method="post"><div><divstyle="margin-left: 5%; display: flex; align-items: center; border-bottom: 1px solid #99CCFF; padding-bottom: 5px;"><i class="layui-icon layui-icon-file"style="font-size: 20px; margin-right: 10px;color: #99CCFF;"></i><span id="basicInfo" style="color: #99CCFF;">基本信息</span></div><table id="basicInfoTable"><tr><td class="tdTitle">单位类别</td><td width="35%" style="padding-left: 0.5%"><input class="easyui-textbox" id="unitName" name="unitName" style="width: 99%;" readonlydata-options="required:true" /></td><td class="tdTitle">注册地</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="registerPlace"style="width: 99%" /></td></tr><tr><td class="tdTitle">名称</td><td colspan="3" style="padding-left: 0.5%"><input class="easyui-textbox" name="appellation"style="width: 99.7%;" data-options="required:true,missingMessage:'请填写名称'" /></td></tr><tr><td class="tdTitle">统一社会信用代码/身份证</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="unitCode" style="width: 99%"data-options="required:true, missingMessage:'请填写身份证', validType:'idcard'" /></td><td class="tdTitle">法人代表</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="legalPerson"style="width: 99%" /></td></tr><tr><td class="tdTitle">成立日期</td><td style="padding-left: 0.5%"><input class="easyui-datebox" required="true" editable="false" id="foundTime"name="foundTime" style="width: 99%" /></td><td class="tdTitle">单位地址</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="workAddress"style="width: 99%" /></td></tr><tr><td class="tdTitle">联系人</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="contacts"style="width: 99%" /></td><td class="tdTitle">联系电话</td><td style="padding-left: 0.5%"><input class="easyui-textbox" name="phone" style="width: 99%"data-options=" validType:'mobile'" /></td></tr><tr><td class="tdTitle">备注</td><td colspan="3" style="padding-left: 0.5%;height: 90px"><input id="notes" name="notes"class="easyui-textbox" style="width: 99.7%;height: 80px;margin-top: 10px"data-options="multiline:true" /></td></tr><input id="customerTreeId" name="customerTreeId" type="hidden" class="easyui-textbox" /><input id="customerListId" name="customerListId" type="hidden" class="easyui-textbox" /><input id="customerCode" name="customerCode" type="hidden" class="easyui-textbox" /></table></div></form><div><divstyle="margin-left: 5%; margin-top: 0%; display: flex; align-items: center; border-bottom: 1px solid #99CCFF; padding: 5px;"><i class="layui-icon layui-icon-user" style="font-size: 20px; margin-right: 10px; color: #99CCFF;"></i><span style="color: #99CCFF;">收款账户信息</span></div><table id="accountTable"><thead style="background-color: #fafafa; border: 1px solid #ccc;"><tr style=" height: 40px;border: 1px solid #e2e2e2; background-color: #fafafa;width: 15%;text-align: center;"><th id="accountTableTrAdd" field="add" width="10%" style="border: 1px solid #ccc;"><button class="layui-btn layui-btn-sm layui-btn-primary" id="accountTableAddRow"onclick="addRow()" style="background-color: #99CCFF;"><i class="layui-icon layui-icon-add-1" style="color: #fff;"></i>添加</button></th><th field="name" width="30%" style="border: 1px solid #ccc;"><spanclass="headerFont">收款户名</span></th><th field="account" width="30%" style="border: 1px solid #ccc;"><spanclass="headerFont">银行账号</span></th><th field="bank" width="30%" style="border: 1px solid #ccc;"><span class="headerFont">开户行</span></th></tr></thead><tbody><!-- <tr><td style="text-align: center;"><button class="layui-btn layui-btn-sm layui-btn-danger" οnclick="deleteRow(this)"><i class="layui-icon layui-icon-delete"></i>删除</button></td><td><input class="easyui-textbox" style="width: 100%" data-options="required:true"/></td><td><input class="easyui-textbox" style="width: 100%" data-options="required:true"/></td><td><input class="easyui-textbox" style="width: 100%;" data-options="required:true"/></td></tr>--></tbody></table></div></body><script type="text/javascript">$.extend($.fn.validatebox.defaults.rules, {mobile: {validator: function(value) {// 判断手机号格式是否正确return /^1[3-9]\d{9}$/.test(value);},message: '请输入正确的手机号码'}});$.extend($.fn.validatebox.defaults.rules, {idcard: {validator: function(value) {// 判断身份证号格式是否正确return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);},message: '请输入正确的身份证号码'}});function addRow(data) {if (data != null) {var table = $('#accountTable');for (var i = 0; i < data.length; i++) {var paymentNameValue = data[i].paymentName;var bankAccountValue = data[i].bankAccount;var bankNameValue = data[i].bankName;var paymentInfoIdValue = data[i].paymentInfoId;var index = table.find('tbody tr').length + 1;var row = '<tr>' +'<td style="text-align: center;">' +'<button class="layui-btn layui-btn-sm layui-btn-danger" οnclick="deleteRow(this)">' +'<i class="layui-icon layui-icon-delete"></i>删除' +'</button>' +'</td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="paymentName" style="width: 99%" data-options="required:true" value="' +paymentNameValue + '"/></td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="bankAccount" style="width: 99%" data-options="required:true" value="' +bankAccountValue + '"/></td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="bankName" style="width: 99%;" data-options="required:true" value="' +bankNameValue + '"/></td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="paymentInfoId" type="hidden" data-options="required:true" value="' +paymentInfoIdValue + '"/></td>' +'</tr>';table.find('tbody').append(row);$.parser.parse(table.find('tbody tr:last-child')); // 解析 EasyUI 组件}} else {var table = $('#accountTable');var index = table.find('tbody tr').length + 1;var row = '<tr>' +'<td style="text-align: center;">' +'<button class="layui-btn layui-btn-sm layui-btn-danger" οnclick="deleteRow(this)">' +'<i class="layui-icon layui-icon-delete"></i>删除' +'</button>' +'</td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="paymentName" style="width: 99%" data-options="required:true"/></td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="bankAccount" style="width: 99%" data-options="required:true"/></td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="bankName" style="width: 99%;" data-options="required:true"/></td>' +'<td style="padding-left: 0.5%"><input class="easyui-textbox" name="paymentInfoId" type="hidden" /></td>' +'</tr>';table.find('tbody').append(row);$.parser.parse(table.find('tbody tr:last-child')); // 解析 EasyUI 组件}}function addRowInfo(data) {if (data != null) {var table = $('#accountTable');for (var i = 0; i < data.length; i++) {var paymentNameValue = data[i].paymentName;var bankAccountValue = data[i].bankAccount;var bankNameValue = data[i].bankName;var paymentInfoIdValue = data[i].paymentInfoId;var index = table.find('tbody tr').length + 1;var row = '<tr style="width: 100%">' +'<td style="padding-left: 0.5%;text-align:center;"><span class="headerFont">' + (i + 1) +'</span></td>' +'<td style="padding-left: 0.5%;"><input class="easyui-textbox" name="paymentName" style="width: 99%" data-options="required:true" value="' +paymentNameValue + '"/></td>' +'<td style="padding-left: 0.5%;"><input class="easyui-textbox" name="bankAccount" style="width: 99%" data-options="required:true" value="' +bankAccountValue + '"/></td>' +'<td style="padding-left: 0.5%;"><input class="easyui-textbox" name="bankName" style="width: 99%;" data-options="required:true" value="' +bankNameValue + '"/></td>' +'<td id="accountTableTrTdAdd"><input class="easyui-textbox" name="paymentInfoId" type="hidden" data-options="required:true" value="' +paymentInfoIdValue + '"/></td>' +'</tr>';table.find('tbody').append(row);$.parser.parse(table.find('tbody tr:last-child')); // 解析 EasyUI 组件$('#accountTableTrTdAdd' + (i + 1)).hide();}var h = "";h += " <span class=\"headerFont\">编号</span>";$('#accountTableTrAdd').html(h);}}function selectList() {var list = []; // 定义一个列表，用于保存输入框的值$.each($("#accountTable tbody tr"), function(index, item) {list[index] = {paymentName: $(this).find("[name=paymentName]").val(),bankAccount: $(this).find("[name=bankAccount]").val(),bankName: $(this).find("[name=bankName]").val(),paymentInfoId: $(this).find("[name=paymentInfoId]").val()}});return JSON.stringify(list);}function deleteRow(btn) { //删除子表信息var paymentInfoId = $(btn).closest('tr').find("[name=paymentInfoId]").val();$(btn).closest('tr').remove();$.ajax({ //子表 数据url: ctx + "/conPayment/delPaymentList?id=" + paymentInfoId,type: "get",success: function(data) {if (data) {// 将 data 的值动态设置到 addRow() 函数中的输入框中layer.msg('操作成功', {icon: 1,time: 1500,offset: 't',area: '200px'});}}});}</script></html>相关文章：
easyui主表子表维护页面
easyui主表子表维护页面 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Title</title><!-- <#include "common.html"/> --><link rel"stylesheet" type&quo…...
k8s exam
Pause 容器是 Pod 中的第一个启动的容器，其他所有的用户容器都是其子进程当 Pod 被从节点中删除时，与之关联的 emptyDir 中的数据也将被永久删除。持久存储用PV，PVCService 资源定义了如何访问应用，但实际的网络流量管理和路由是由…...
C#，中国福利彩票《刮刮乐》的数学算法（02）——时来运转
1 中国福利彩票 中国福利彩票始于1987年7月27日，以“团结各界热心社会福利事业的人士，发扬社会主义人道主义精神，筹集社会福利资金，兴办残疾人、老年人、孤儿福利事业和帮助有困难的人”、即“扶老、助残、救孤、济困”为宗旨。随…...
我的观影记录表【个人向】
目录 前言电影评分标准闪电侠（2023）银河护卫队3（2023） 前言 这里是我本人的观影记录，这个想法2年前就有了，但是一直比较懒，现在（上班摸鱼）准备重新开始，评价…...
网络安全策略应包含哪些？
网络安全策略是保护组织免受网络威胁的关键措施。良好的网络安全策略可以确保数据和系统的保密性、完整性和可用性。以下是一个典型的网络安全策略应包含的几个重要方面： 1. 强化密码策略：采用强密码，要求定期更换密码，并使用多因…...
【Git】Git GitHub
1. Git1.1 Git基本操作1.2 Git版本回退1.3 Git分支操作 2. Git 配合GitHub2.1 生成密钥2.2 GitHub添加公钥2.3 Git连接GitHub2.4 本地仓库关联远程仓库2.5 本地代码push远程仓库2.6 本地clone远程仓库2.7 本地fetch和pull 1. Git 1.1 Git基本操作 touch test.py 工作区创建文…...
[STL]详解list模拟实现
[STL]list模拟实现 文章目录 [STL]list模拟实现1. 整体结构总览2. 成员变量解析3. 默认成员函数构造函数1迭代器区间构造函数拷贝构造函数赋值运算符重载析构函数 4. 迭代器及相关函数迭代器整体结构总览迭代器的模拟实现begin函数和end函数begin函数和end函数const版本 5. 数据…...
C和C++的区别与联系
C语言（C）和C语言（C）是两种编程语言，它们之间有许多区别和联系。以下是它们之间的主要区别和联系： 区别： 历史和起源： C语言是由Dennis Ritchie于20世纪70年代初在贝尔实验室开发的。…...
springboot通过接口执行本地shell脚本
首先创建springboot项目 shell脚本 #!/bin/shecho Hello World！然后编写执行shell脚本的util类 import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.List;pub…...
工欲善其事必先利其器，IT工作电脑更要维护好
目录 一：电脑的组成 二：维护措施 三：助力记忆 一：电脑的组成 当谈到电脑主机时，我们通常指的是电脑的中央处理器(CPU)、内存、主板、电源、硬盘、显卡、声卡、网卡等核心部件组成的整体。这些部件共同协作ÿ…...
移动端个人中心UI设计
效果图 源码如下 页面设计 <template><div class"container"><!-- 顶部用户信息 start--><div class"header"><div class"user-info"><van-image class"user-img" round width"70" :sr…...
开发接口，你需要先搞懂这些概念！
SOA Service Oriented Ambiguity 即面向服务架构， 简称SOA。 SOA的提出是在企业计算领域，就是要将紧耦合的系统，划分为面向业务的，粗粒度，松耦合，无状态的服务。服务发布出来供其他服务调用，一…...
zookeeper常用命令
zkClient 简介 zkClient是简易的客户端程序 进入zkClient 在bin目录下输入zkCli.sh 节点命令 增 create 路径 数据 -s：顺序节点 -e：临时节点 默认情况下，不添加-s或者-e参数的，创建的是持久节点改 set 路径 数据 版本…...
亚马逊水基灭火器UL8测试报告ISO17025实验室办理
在跨境电商平台上销售的境外电商，在美国市场中需要提供相关的安全规范报告。其中，美国相关部门要求，如果商家未能提交UL（Underwriters Laboratories）标准的检测报告，将会被责令停止销售。而为了在亚马逊、T…...
Shell学习脚本-if多分支结构
语法： if 条件then指令集 else指令集 fi特殊写法： if [ -f "$file1" ]; then echo 1; else echo 0; fi 相当于： [ -f "$file1" ] && echo 1 || echo 0 多分支结构： if 条件then指令 elif 条件th…...
[SQL挖掘机] - 窗口函数 - lead
介绍: lead() 是一种常用的窗口函数，它用于获取某一行之后的行的值。它可以用来在结果集中的当前行后面访问指定列的值。 用法: lead() 函数的语法如下： lead(列名, 偏移量, 默认值) over (partition by 列名1, 列名2, ... order by 列名 [asc|desc]…...
PyTorch Lightning教程四：超参数的使用
如果需要和命令行接口进行交互，可以使用Python中的argparse包，快捷方便，对于Lightning而言，可以利用它，在命令行窗口中，直接配置超参数等操作，但也可以使用LightningCLI的方法，更加轻…...
2023 蓝桥杯真题B组 C/C++
https://www.dotcpp.com/oj/train/1089/ 题目 3150: 蓝桥杯2023年第十四届省赛真题-冶炼金属 题目描述 小蓝有一个神奇的炉子用于将普通金属 O 冶炼成为一种特殊金属 X。这个炉子有一个称作转换率的属性 V，V 是一个正整数，这意味着消耗 V 个普通金 属 O…...
视频怎样分割成两段？分享几种视频分割方法
当需要制作长时间的视频时，将视频分割成几段可以帮助你更好地组织视频内容，使其更易于理解和学习。与此同时，将视频分割成多个小部分也可以在不影响整体视频质量的情况下将其上传到各种平台，并节省存储空间。此外，如果…...
cyber_back
1.1 话题通信 模式： 以发布订阅的方式实现不同节点之间数据交互的通信模式。 如图1-1所示，Listener-Talker通信首先创建了两个Node，分别是Talker Node和 Listener Node。 每个Node实例化Writer类和Reader类对Channel进行消息的读写。 Writer…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题， 因为搜索范围是有界的，上界最大木板长度补充的全部木料长度，下界最小木板长度； 即left0,right10^6; 我们可以设置一个候选值x(mid)，将木板的长度全部都补充到x，如果成功…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心，直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法，涵盖基础规则、优化算法和容错机制： 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则： 大尺寸/重量积木在下…...
js 设置3秒后执行
如何在JavaScript中延迟3秒执行操作 在JavaScript中，要设置一个操作在指定延迟后（例如3秒）执行，可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法，它接受两个参数： 要执行的函数&…...
无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技
无需布线的革命：电力载波技术赋能楼宇自控系统 在楼宇自动化领域，传统控制系统依赖复杂的专用通信线路，不仅施工成本高昂，后期维护和扩展也极为不便。电力载波技术（PLC）的突破性应用，彻底改变了…...
智警杯备赛--excel模块
数据透视与图表制作 创建步骤 创建 1.在Excel的插入或者数据标签页下找到数据透视表的按钮 2.将数据放进“请选择单元格区域“中，点击确定 这是最终结果，但是由于环境启不了，这里用的是自己的excel，真实的环境中的excel根据实训…...