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>
相关推荐
徊忆羽菲14 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃24 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想36 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷37 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson41 分钟前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹3 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志3 小时前
typescript结构化类型应用两例
javascript
gnip4 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js