easyUI--dialog, form

最新推荐文章于 2022-06-16 15:45:47 发布

Tate-Ling

最新推荐文章于 2022-06-16 15:45:47 发布

阅读量1k

点赞数

文章标签： easyUI dialog form

本文链接：https://blog.csdn.net/szzt_lingpeng/article/details/30802109

版权

未整理专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本人测试案例

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery EasyUI demo</title>

		<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>
		<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
	</head>
	<script type="text/javascript">
	var loginDialog;
	var loginInputForm;

	$(function() {
		loginDialog = $("#loginDialog").dialog(
				{
					title : "登入",
					modal : true,
					closable : false,
					cache : false,
					resizable : true,
					buttons : [
							{
								text : '重置',
								disabled : true,
								handler : function() {

								}
							},
							{
								text : '登入1',
								handler : function() {
									loginInputForm = $("#loginInputForm").form('submit', {
										url : "/demo/userAction!doNotNeedSession_login.action",
										onSubmit : function() {

										},
										success : function(data) {
											data = eval('(' + data + ')'); // change the JSON string to javascript object   
											console.info("Success Saved: " + data.msg);
										},
										onLoadSuccess : function(data) {
											console.info(1);
											loginInputForm.form("clear");
										}
									});
								}
							},
							{
								text : '登入2',
								handler : function() {
									$.messager.progress();

									$.ajax({
										type : "POST",
										url : "/demo/userAction!doNotNeedSession_login.action",
										data : "cname=" + $("#loginInputForm[name='cname']")
												+ "&cpwd=" + $("#loginInputForm[name='cpwd']"),
										data : $("#loginInputForm").serialize(),
										dataType : "json",
										success : function(msg) {
											$.messager.progress("close");
											console.info("Success Saved: " + msg.msg);
											var curWwwPath = window.document.location.href;
											var pathName = window.document.location.pathname;
											var pos = curWwwPath.indexOf(pathName);
											var localhostPaht = curWwwPath.substring(0, pos);
											var projectName = pathName.substring(0, pathName
													.substr(1).indexOf('/') + 1);

											console.info($("#loginInputForm").serialize());
											console.info(curWwwPath + "-" + pathName);
											console.info(localhostPaht + "-" + projectName);
										}
									});
								}
							}, {
								text : '登入3',
								handler : function() {
									console.info("登入3");

									loginInputForm = $("#loginInputForm").form("submit", {
										url : "/demo/userAction!doNotNeedSession_login.action",
										onSubmit : function() {
											console.info("onSubmit");
										},
										success : function(data) {
											data = eval('(' + data + ')'); // change the JSON string to javascript object   
											console.info("Success Saved: " + data.success);

											if (data.success == false) {
												$.messager.alert('Warning', 'The warning message');

												$.messager.show({
													title : 'My Title',
													msg : data.msg,
													timeout : 5000,
													showType : 'slide'
												});
											} else {
												loginDialog.dialog("close");
											}

										},
										onLoadSuccess : function(data) {
											console.info("onLoadSuccess");
										},
										load : function(data) {
											console.info("load");
										}
									});

								}
							} ]
				});
	});
</script>
	<body>
		<div id="loginDialog" style="width: 400px; height: 200px;">
			<form id="loginInputForm" method="post">
				<table>
					<tr>
						<th>
							用户名:
						</th>
						<td>
							<input name="cname" class="easyui-validatebox" data-options="required:true,validType:'email'" />

						</td>
					</tr>
					<tr>
						<th>
							密码:
						</th>
						<td>
							<input name="cpwd" class="easyui-validatebox" data-options="required:true,validType:'email'" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>