zlivEdit 0.0.4

소개 - Introduce

zlivEdit 는 jQuery 플러그인 입니다.

Table 태그의 내용을 쉽게 수정할 수 있습니다.

테이블 내용 클릭 : 수정 입력창 생성 (플러그인 설정에 따라 수정을 막을 수 있습니다.)
내용 수정 후 : ESC = 수정 취소
내용 수정 후 : Enter = 수정 완료 (Textarea 의 경우, Ctrl+Enter)
내용 수정 후 : Tab = 수정 완료 / 다음 칸 이동 (Shift + Tab : 역방향)  (v0.0.3 추가)
내용 수정 후 : 아무 곳이나 클릭 = 수정 완료

사용방법 - How to use

$(Table Element ID).zlivEdit(Edit Class Name, Input Type, Callback Func);
ex) $("#list").zlivEdit("editCss", { name: {type: "text"}, memo: {type: "textarea"} }, update);

1) 3가지 파라미터가 모두 지정되야 합니다.
2) TD 태그의 아이디(ID)column_idx 형식으로 지정되야 합니다.
3) 2)의 TD 태그 클래스 중, Edit Class Name 과 동일한 클래스 이름이 있어야 합니다. (예제의 editable)

Callback 함수로 3개의 데이터가 반환됩니다. (__col : 컬럼명, __no : 고유번호(DB-Primary Key), __val : 값)

zlivEdit 0.0.4 [다운로드]

업데이트/패치 목록 - Update/Patch List (v0.0.3 -> v0.0.4)

1. 포커스를 잃을 때 데이터가 전송되지 않던 버그 패치

(v0.0.2 -> v0.0.3)
1. Tab 키로 순환 이동 가능 (Shift + Tab : 역방향)
2. Choice 타입일 경우, 선택을 바꿈과 동시에 전송시키는 부분 삭제

(v0.0.1 -> v0.0.2)
1. <, > 입력 후 다음 수정 때 &lt;, &gt; 로 변경되는 것 수정

(v0.0.1)
Ta-Da!!!

예제 - Example (With MySQL)

No Name Nick Memo Allow Login

Example - ./index.php

<!doctype html>
<html>
	<head>
		<title>jQuery Plugin - zlivEdit 0.0.4</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script>!window.jQuery && document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><\/script>');</script>
		<script src="./jquery.zlivEdit.min.js"></script>
		<script src="./script.js"></script>
	</head>
	<body>
		<table id="listTable">
			<tr>
				<th class="no">No</th>
				<th class="username">Name</th>
				<th class="usernick">Nick</th>
				<th class="usermemo">Memo</th>
				<th class="allowLogin">Allow Login</th>
			</tr>
		</table>
	</body>
</html>

Example - ./script.js

$(document).ready(function() {
	init();
	function init() {
		getList();
		$("#listTable").zlivEdit("editable", {
			username   : { type: "text" },
			usernick      : { type: "" }, // Default : text
			usermemo  : { type: "textarea" },
			allowlogin	 : { type: "choice", data: { "true": "Yes", "false": "No" } }
		}, __update);
	}
	function getList() {
		$.ajax({
			url: "./ajax/list.php", // You must edit this value.
			dataType: "json",
			async: false,
			success: function(data) {
				if(data.code == 0) {
					alert("Error :: Create list");
					return;
				} else {
					$("#listTable tr:gt(0)").remove();
					var $table = $("#listTable");
					for(el in data) {
						var $tr = $("<tr />");
						var $td1 = $("<td />").addClass("no").text(data[el].no);
						var $td2 = $("<td />").prop("id", "username_"+data[el].no).addClass("editable username").text(data[el].username);
						var $td3 = $("<td />").prop("id", "usernick_"+data[el].no).addClass("editable usernick").html(data[el].usermemo.replace(/\n/gi, "<br />"));
						var $td4 = $("<td />").prop("id", "usermemo_"+data[el].no).addClass("editable usermemo").text(data[el].usermemo);
						var $td5 = $("<td />").prop("id", "allowlogin_"+data[el].no).addClass("editable allowLogin").text(data[el].allowLogin);
						if(el == 2) $td3.removeClass("editable").html($td3.text()+" (Can't edit)");
						$tr.append($td1, $td2, $td3, $td4, $td5).appendTo($table);
					}
				}
			}
		});
	}
	function __update(data) {
		$.ajax({
			url: "./ajax/update.php", // You must edit this value.
			type: "POST",
			data: {ztc: data.__col, zti: data.__no, ztd: data.__val},
			dataType: "json",
			async: false,
			success: function(data) {
				if(data.code != 1) alert(data.msg);
				else getList();
			}
		});
	}
});

Example - ./style.css

.__zlivEdit_text {
	font: bold 9pt 'Verdana';
	background-color: #000;
	color: #fff;
	border: 0;
}
.__zlivEdit_textarea {
	font: bold 9pt 'Verdana';
	background-color: #bcf5a9;
	border: 0;
}
.editable {
}
.editable:hover {
	background: #fa5858;
	color: #fff;
	cursor: pointer;
}

#listTable {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-collapse: collapse;
}
#listTable tr {
	height: 30px;
}
#listTable tr th, #listTable tr td {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
#listTable tr th {
	background-color: #444;
	font-size: 10pt;
	color: #ccc;
}
#listTable tr td {
	font: normal 9pt 'Verdana';
	padding: 3px;
}
#listTable tr *.no {
	width: 50px;
	text-align: center;
}
#listTable tr *.username {
	width: 110px;
	text-align: center;
}
#listTable tr *.usernick {
	width: 130px;
}
#listTable tr *.usermemo {
	width: 500px;
	word-break: break-all;
}
#listTable tr *.allowLogin {
	width: 100px;
	text-align: center;
}

개발자 - Developer

닉네임 : Zective

이메일 : zective (at) gmail (dot) com

홈페이지 : http://www.zective.com