easyui主表子表维护页面

easyui主表子表维护页面

html 复制代码
<!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>

				<div
					style="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%;" readonly
								data-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>
			<div
				style="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;"><span
								class="headerFont">收款户名</span></th>
						<th field="account" width="30%" style="border: 1px solid #ccc;"><span
								class="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>
相关推荐
GISer_Jing9 分钟前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪10 分钟前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山12 分钟前
React事件处理机制详解
开发语言·前端·javascript·react.js
对卦卦上心16 分钟前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师16 分钟前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
GIS好难学39 分钟前
《Vue零基础入门教程》第二课:搭建开发环境
前端·javascript·vue.js·ecmascript·gis·web
蒟蒻的贤3 小时前
vue11.22
开发语言·前端·javascript
爱上语文3 小时前
Axios案例练习
前端·javascript·css·html
天天进步20153 小时前
Vue 3 + Vite:构建闪电般快速的开发环境
前端·javascript·vue.js
Dragon Wu3 小时前
前端框架 Redux tool RTK 总结
前端·javascript·前端框架