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…...

VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

Mac flutter环境搭建
一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...
Java并发编程实战 Day 11:并发设计模式
【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天,今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案,它们不仅提供了优雅的设计思路,还能显著提升系统的性能…...