Skip to content

jquery_in_depth_4

Jump to bottom
KyusungDev edited this page May 16, 2017 · 2 revisions

์‹ค์ „์˜ˆ์ œ - ์—ฐ๋ฝ์ฒ˜ ์„œ๋น„์Šค ๊ธฐ๋Šฅ

์‚ฌ์šฉํ•˜๋Š” jQuery ํ”Œ๋Ÿฌ๊ทธ์ธ

  • waitme : ajax ํ˜ธ์ถœ์‹œ์— indicator๋ฅผ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค.
  • jPaginate : ํŽ˜์ด์ง€ ์ด๋™์‹œ์— ์‚ฌ์šฉํ•œ๋‹ค.
  • jsRender : View Template์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•œ๋‹ค.
  • jQuery UI Dialog : ์—ฐ๋ฝ์ฒ˜ ์ถ”๊ฐ€/์ˆ˜์ •์— ์‚ฌ์šฉํ•œ๋‹ค.

์„œ๋ฒ„๋Š” JSP๋กœ ์ž‘์„ฑ๋˜์—ˆ์œผ๋ฉฐ, JSON ๋ฌธ์ž์—ด์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์ž๋ฐ”์˜ JSON ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ google-gson์„ ์ด์šฉํ•ด ์ž๋ฐ” ๊ฐ์ฒด๋ฅผ JSON ๋ฌธ์ž์—ด๋กœ ์ง๋ ฌํ™”ํ•œ๋‹ค.
์„œ๋ฒ„์—์„œ ์ž‘์„ฑํ•œ JSP ๋™์ž‘์„ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์œ„ํ•ด ํฌ๋กฌ ์•ฑ ARC(Advanced REST Client)์„ ์‚ฌ์šฉํ•œ๋‹ค.

๊ฒฐ๊ณผ ํ™”๋ฉด

jquery_in_depth_4_1

ํด๋ผ์ด์–ธํŠธ ์ฝ”๋“œ

<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="UTF-8">
	<title>Contact List</title>
	<link rel="stylesheet" type="text/css" href="./jpaginate/style.css" />
	<link rel="stylesheet" type="text/css" href="./waitme/waitMe.css" />
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/humanity/jquery-ui.css" />

	<style>
		body { font-size: 75%; }
		input.text {
			margin-bottom: 12px;
			width: 95%;
			padding: .4em;
		 }
	</style>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
	<script src="https://www.jsviews.com/download/jsrender.js"></script>
	<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
	<script src="waitme/waitMe.js"></script>
	<script src="jpaginate/jquery.paginate.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

		var param = {pageno:1, pagesize:2 };
		var totalPage = 0;

		var pageOption = {
			count: 1,
			start: 1,
			display: 10,
			border: true,
			border_color: "#333333",
			text_color: "#ffffff",
			background_color: "#cb842e",
			border_hover_color: "#333333",
			text_hover_color: "#000000",
			background_hover_color: "#cb842e",
			images: false,
			mouse: "press",
			onChange: function(page) {
				param.pageno = page;
				viewContactList();
			}
		};

		$("#input_dialog").dialog({
			autoOpen: false,
			modal: true
		});
		
		var addContact = function() {
			var param = $("form#f_contact").serialize();
			$.post("/contact/add.jsp", param, function(data) {
				if (data.status === "ok") {
					param.pageno = 1;
					viewContactList();
				}
			});
			
			$("#input_dialog").dialog("close");
		};
		
		var cancelInput = function() {
			$("#input_dialog").dialog("close");
		}
		
		var initializeInputForm = function() {
			$("form#f_contact")[0].reset();
		}
		
		var viewContactList = function() {
			$.get("http://localhost:8080/contact/list_long.jsp", param, function(data) {

				$("#contactlist").empty();
				var tmpl = $.templates("#tmpl_contact");
				var str  = tmpl.render(data.contacts);
				$("#contactlist").html(str);

				totalPage = Math.floor((data.totalCount-1)/param.pagesize) + 1;
				pageOption.count = totalPage;
				pageOption.start = param.pageno;
				$("#paging").paginate(pageOption);
			});
		};
		
		var editContact = function(no) {
			$.get("/contact/contact.jsp", {no: no}, function(data) {
				if (data.errormessage) {
					alert(data.errormessage);
				} else {
					var dialog = $("#input_dialog");
					dialog.find("#no").val(data.no);
					dialog.find("#name").val(data.name);
					dialog.find("#tel").val(data.tel);
					dialog.find("#address").val(data.address);
					dialog.dialog({
						autoOpen:true,
						modal: true,
						buttons: {
							"์ˆ˜์ •": updateContact,
							"์ทจ์†Œ": cancelInput
						}
					});
				}
			});
		};
		
		var updateContact = function(no) {
			var paramArray = $("#f_contact").serializeArray();
			paramArray.push({name:"no", value:$("#no").val() });
			var param = $.param(paramArray);
			$.post("/contact/update.jsp", param, function(data) {
				if (data.status === "ok") {
					viewContactList();
				} else {
					alert("์—ฐ๋ฝ์ฒ˜ ๋ณ€๊ฒฝ ์‹คํŒจ : " + data.message);
				}
				$("#input_dialog").dialog("close");
			});
		};
		
		var deleteContact = function(no) {
			if (confirm("์ •๋ง๋กœ ์‚ญ์ œ?") === true) {
				var param = {};
				param.no = no;
				$.post("/contact/delete.jsp", param, function(data) {
					if (data.status === "ok") {
						viewContactList();
					} else {
						alert("์—ฐ๋ฝ์ฒ˜ ์‚ญ์ œ ์‹คํŒจ");
					}
				});
			}
		};

		var ajaxLoading = function(isLoading) {
			if (isLoading == false) {
				$("body").waitMe("hide"); 
			} else {
				$("body").waitMe({
					effect: "ios",
					text: "์ฒ˜๋ฆฌ ์ค‘์ž…๋‹ˆ๋‹ค.",
					bg: 'rgba(255,255,255,0.7)',
					color: "#000",
					source: 'waitme/img.svg',
				});
			}
		}
		
		$(document).ajaxStart(function() {
			ajaxLoading(true);
		}).ajaxStop(function() {
			ajaxLoading(false);
		});
		
		
		$("#btnNewContact").click(function() {
			initializeInputForm();
			$("#input_dialog").dialog({
				modal: true,
				buttons : {
					"์ถ”๊ฐ€" : addContact,
					"์ทจ์†Œ" : cancelInput
				}
			});
			
			$("#input_dialog").dialog("open");
		});
		
		$("#contactlist").on("click", "button.update", function() {
			var no = $(this).data("no");
			editContact(no);
		});
		
		$("#contactlist").on("click", "button.delete", function() {
			var no = $(this).data("no");
			deleteContact(no);
		});
		
		viewContactList();
	})
	</script>
	<script id="tmpl_contact" type="text/x-jsrender">
		<tr>
			<td>{{:no}}</td>
			<td>{{:name}}</td>
			<td>{{:tel}}</td>
			<td>{{:address}}</td>
			<td>
				<button data-no="{{:no}}" role="button" class="update ui-button ui-state-default ui-button-text-only">
					<span class="ui-button-text">์ˆ˜์ •</span>
				</button>
				<button data-no="{{:no}}" role="button" class="delete ui-button ui-state-default ui-button-text-only">
					<span class="ui-button-text">์‚ญ์ œ</span>
				</button>
			</td>
		</tr>
	</script>
</head>

<body>
	<h2 class="ui-widget ui-header">์—ฐ๋ฝ์ฒ˜ ๋ฆฌ์ŠคํŠธ</h2>
	<button role="button" id="btnNewContact" class="add ui-button ui-button ui-state-default ui-button-text-only">
	<span class="ui-button-text">์ƒˆ๋กœ์šด ์—ฐ๋ฝ์ฒ˜ ์ถ”๊ฐ€</span>
	</button>
	<div id="output" style="text-align:center; width:630px;">
	<table id="contact_table" style="border:solid 1px black;">
		<thead>
			<tr style="background-color: #cb842b; color:white;">
				<th style="width:60px;">๋ฒˆํ˜ธ</th>
				<th style="width:90px;">์ด๋ฆ„</th>
				<th style="width:100px;">์ „ํ™”๋ฒˆํ˜ธ</th>
				<th style="width:250px;">์ฃผ์†Œ</th>
				<th style="width:130px;">๊ธฐ๋Šฅ</th>
			</tr>
		</thead>
		<tbody id="contactlist">
		</tbody>
	</table>
	<div id="paging" ></div>
	</div>
	
	<div id="input_dialog" title="์—ฐ๋ฝ์ฒ˜ ์ถ”๊ฐ€/์ˆ˜์ •">
		<form id="f_contact">
			<label for="no">์ผ๋ จ๋ฒˆํ˜ธ</label>
			<input type="text" name="no" id="no" class="text" disabled />
			<label for="name">์ด๋ฆ„</label>
			<input type="text" name="name" id="name" class="text" />
			<label for="tel">์ „ํ™”๋ฒˆํ˜ธ</label>
			<input type="text" name="tel" id="tel" class="text" />
			<label for="address">์ฃผ์†Œ</label>
			<input type="text" name="address" id="address" class="text" />
		</form>
	</div>
</body>
</html>

์†Œ์Šค์ฝ”๋“œ

Clone this wiki locally