jquery flexigrid & fancybox part3

By -

จากบทความ ภาคแรก กับภาคสอง ที่เรา ประยุกต์ เอา jquery flexigrid และ fancybox มา รวมร่างกัน
แต่มันก็เป็นแค่แนวนาง ยังขาดอะไรหลายๆอย่าง  วันนี้ มีน้องคนนึง ขออนุญาติ เอ่ยนามนะครับ คือ
น้อง อุ๋..Paiboon Auengkongkathong ซึ่งตอนนี้ ฝึกงานอยู่ที่  http://www.clusterkit.co.th/
พัฒนา จากสคริปดังกล่าว แล้วทำให้มันสมบูรณ์ แบบ
จะสมบูรณ์ยังไง มาดูกันเลย
รายละเอียดสำคัญถ้าท่านได้อ่าน บทความแรก จนมาถึงบทความนี้ ก็คงจะเข้าใจเป็นอย่างดีนะครับ
ฐานข้อมูลชื่อ country

DROP TABLE IF EXISTS `country`;
CREATE TABLE `country` (
  `id` int(11) NOT NULL auto_increment,
  `iso` char(2) NOT NULL,
  `name` varchar(80) NOT NULL,
  `printable_name` varchar(80) NOT NULL,
  `iso3` char(3) default NULL,
  `numcode` smallint(6) default NULL,
  PRIMARY KEY  (`id`)
);

ต่อไปก็หน้า index.php ซึ่งไปโหลด ไฟล์จากหน้า data.php มาแสดง
เขียนโค้ด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>flexigrid&fancybox</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="plugin/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/flexigrid/css/flexigrid.css" />
<script type="text/javascript" src="plugin/flexigrid/js/flexigrid.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#flex1").flexigrid({
			url: 'data.php',
			dataType: 'json',
			colModel : [
				{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
				{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
				{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
				{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
				{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
				{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
				],
			buttons : [
				{name: 'Add', bclass: 'add', onpress : test},
				{separator: true},
				{name: 'Edit', bclass: 'edit', onpress : test},
				{separator: true},
				{name: 'Delete', bclass: 'delete', onpress : test},
				{separator: true}
				],
			searchitems : [
				{display: 'ISO', name : 'iso'},
				{display: 'Name', name : 'name', isdefault: true}
				],
			sortname: "id",
			sortorder: "asc",
			usepager: true,
			title: 'Countries',
			useRp: true,
			rp: 10,
			showTableToggleBtn: true,
			width: 640,
			height: 255
		});   
});
 
function test(com,grid) {
    if (com=='Delete') {  // เหตุการณ์เมื่อกดปุ่ม delete 
		if($('.trSelected',grid).length>0) {
			if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
				var items = $('.trSelected',grid);
				var itemlist ='';
				for(i=0;i<items.length;i++){
					itemlist+= items[i].id.substr(3)+",";
				}
				$.ajax({
					type: "POST",
					dataType: "html",
					url: "delete.php",
					data: "items="+itemlist,
					success: function(data){
						alert(data);
						$("#flex1").flexReload();
					}
				});
			}
		} else {
			alert('กรุณาเลือกข้อมูลที่ต้องการลบ!!');
		} 
	} else if (com=='Add') {  // เหตุการเมื่อกดปุ่ม add
		$.fancybox({'href'	: 'add_form.php'});  
	} else if (com=='Edit') { // เหตุการณ์เมื่อกดปุ่ม Edit 
		var items = $('.trSelected',grid);
		if(items.length>0) {
			if( items.length>1) {
				alert('กรุณาเลือกข้อมูลทีละแถว!!');
			} else {
				var id  = items[0].id.substr(3);
				$.fancybox({'href'	: 'edit_form.php?id='+id});  
			}
		} else {
			alert('กรุณาเลือกข้อมูลที่ต้องการแก้ไข!!');
		}
	}
} 
</script>
</head>
<body>
	<table id="flex1" style="display:none"></table>
</body>
</html>

ส่วนไฟล์ data.php นั้นไม่มีการณ์เปลี่ยนแปลง นะครับ ขอข้ามไป โค้ดทุกอย่างทำความเข้าใจได้ในบทความแรกนะครับ
เหตุการณ์เมื่อกดปุ่ม add  โดยไปเรียกหน้า add_form ขึ้นมา
add_form เขียนโค้ด

<script type="text/javascript">
var ajaxSubmit = function(formEl) {
	if ($("#txtiso").val() == '' || $("#txtname").val() == '' || $("#txtprint_name").val() == '' || $("#txtiso3").val() == '' || $("#txtnumcode").val() == ''){
		alert("กรุณากรอกข้อมูลให้ครบ");
	} else {
		var url = $(formEl).attr('action');
		var data = $(formEl).serialize();
		$.ajax({
			type: "post",
			url: url,
			data: data,
			datatype: 'html',
			success: function(data){
				alert(data);
				$.fancybox.close(); 
				$("#flex1").flexReload();
			}    
		})
	}
	return false;
}
 
function fancyboxClose(){
	$.fancybox.close(); 
}
</script>
 
<div class="main-content resize" id="data">
		<h1>เพิ่มข้อมูลประเทศ</h1>
		<p></p>
		<br clear="all" />
		<div>
			<form id="profileForm" type="actionForm" action="add.php" method="post" onSubmit="return ajaxSubmit(this)">
				<table cellpadding="0" cellspacing="0" border="0">
					<tr>
						<td class="label"><label for="txtiso">iso:</label></td>
						<td class="field">
							<input id="txtiso" class="" name="txtiso" size="20" type="text" tabindex="1" value="" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtname">name:</label></td>
						<td class="field">
							<input id="txtname" name="txtname" size="20" type="text" tabindex="1" value="" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtprint_name">printable_name:</label></td>
						<td class="field">
							<input id="txtprine_name" name="txtprint_name" size="20" type="text" tabindex="1" value="" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtiso3">iso3:</label></td>
						<td class="field">
							<input id="txtiso3" name="txtiso3" size="20" type="text" tabindex="1" value="" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtnumcode">numcode:</label></td>
						<td class="field">
							<input id="txtnumcode" name="txtnumcode" size="20" type="text" tabindex="1" value="" />
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<div class="buttonSubmit">
								<span></span>
								<input type="submit" value="Submit" style="width: 100px" tabindex="14" />
								<input type="button" value="Cancel" style="width: 100px" tabindex="15" onClick="fancyboxClose();" />
								<input type="button" value="Reset Form" style="width: 100px" onClick="this.form.reset()"  tabindex="15" />
							</div>
						</td>
					</tr>
				</table>
				<br /><br />
			</form>
			<br clear="all"/>
		</div>
	</div>	<!-- end main content  -->

สำหรับ หน้า add_form ก็จะมีการเขียน สคริปเพิ่มเติม คือ

<script type="text/javascript">
var ajaxSubmit = function(formEl) {
	if ($("#txtiso").val() == '' || $("#txtname").val() == '' || $("#txtprint_name").val() == '' || $("#txtiso3").val() == '' || $("#txtnumcode").val() == ''){
		alert("กรุณากรอกข้อมูลให้ครบ");
	} else {
		var url = $(formEl).attr('action');
		var data = $(formEl).serialize();
		$.ajax({
			type: "post",
			url: url,
			data: data,
			datatype: 'html',
			success: function(data){
				alert(data);
				$.fancybox.close(); 
				$("#flex1").flexReload();
			}    
		})
	}
	return false;
}
 
function fancyboxClose(){
	$.fancybox.close(); 
}
</script>

โดยส่งค่าในฟอร์มทั้งหมด ไปที่หน้า add.php
โค้ดหน้า add.php

<? 
require("function/connectdb.php");
$txtiso = mysql_real_escape_string($_POST['txtiso']);
$txtname = mysql_real_escape_string($_POST['txtname']);
$txtprint_name = mysql_real_escape_string($_POST['txtprint_name']);
$txtiso3 = mysql_real_escape_string($_POST['txtiso3']);
$txtnumcode = mysql_real_escape_string($_POST['txtnumcode']);
$sql = "INSERT INTO `country` (iso,name,printable_name,iso3,numcode) values('$txtiso','$txtname','$txtprint_name','$txtiso3','$txtnumcode')";
runSQL($sql);
echo "เพิ่มข้อมูลเรียบร้อย!!";
 ?>

หลังจากที่เสร็จ สิ้น การบันทึก …. ก็จะปิด funcy dialog พร้อมกับ รีเฟรช ข้อมูล ด้วย

$.fancybox.close();
$("#flex1").flexReload();

การบันทึก ข้อมูลก็เสร็จสิ้น

*************************************************************************************************************

ต่อไปเป็นเหตุการณ์เมื่อมีการกดปุ่ม edit
จากฟังชั่น ในหน้า index.php ก็จะทำการเช็คว่า  user เลือก ทีละแถวรึป่าว แล้วก็ ส่งค่าไปยัง หน้า edit_form.php
edit_form.php เขียนโค้ด

<?php
    header('Cache-Control: no-cache');
    header('Pragma: no-cache');
    header('Expires: 0');
	require("function/connectdb.php");
	$id = $_GET['id'];
	$sql = "SELECT * FROM country WHERE id = ".$id;
	$result = mysql_fetch_assoc(runSQL($sql));
?>
 
<script type="text/javascript">
var ajaxSubmit = function(formEl) {
	if ($("#txtiso").val() == '' || $("#txtname").val() == '' || $("#txtprint_name").val() == '' || $("#txtiso3").val() == '' || $("#txtnumcode").val() == ''){
		alert("กรุณากรอกข้อมูลให้ครบ");
	} else {
		var url = $(formEl).attr('action');
		var data = $(formEl).serialize();
		$.ajax({
			type: "post",
			url: url,
			data: data,
			datatype: 'html',
			success: function(data){
				alert(data);
				$.fancybox.close(); 
				$("#flex1").flexReload();
			}    
		})
	}
	return false;
}
 
function fancyboxClose(){
	$.fancybox.close(); 
}
</script>
 
<div class="main-content resize" id="data">
		<h1>แก้ไขข้อมูลประเทศ</h1>
		<p></p>
		<br clear="all" />
		<div>
			<form id="profileForm" type="actionForm" action="edit.php?id=<?php echo $id; ?>" method="post" onSubmit="return ajaxSubmit(this)">
				<table cellpadding="0" cellspacing="0" border="0">
					<tr>
						<td class="label"><label for="txtiso">iso:</label></td>
						<td class="field">
							<input id="txtiso" name="txtiso" size="20" type="text" tabindex="1" value="<?php echo $result['iso']; ?>" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtname">name:</label></td>
						<td class="field">
							<input id="txtname" name="txtname" size="20" type="text" tabindex="1" value="<?php echo $result['name']; ?>" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtprint_name">printable_name:</label></td>
						<td class="field">
							<input id="txtprine_name" name="txtprint_name" size="20" type="text" tabindex="1" value="<?php echo $result['printable_name']; ?>" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtiso3">iso3:</label></td>
						<td class="field">
							<input id="txtiso3" name="txtiso3" size="20" type="text" tabindex="1" value="<?php echo $result['iso3']; ?>" />
						</td>
					</tr>
					<tr>
						<td class="label"><label for="txtnumcode">numcode:</label></td>
						<td class="field">
							<input id="txtnumcode" name="txtnumcode" size="20" type="text" tabindex="1" value="<?php echo $result['numcode']; ?>" />
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<div class="buttonSubmit">
								<span></span>
								<input type="submit" value="Submit" style="width: 100px" tabindex="14" />
								<input type="button" value="Cancel" style="width: 100px" tabindex="15" onClick="fancyboxClose();" />
								<input type="button" value="Reset Form" style="width: 100px" onClick="this.form.reset()"  tabindex="15" />
							</div>
						</td>
					</tr>
				</table>
				<br /><br />
			</form>
			<br clear="all"/>
		</div>
	</div>	<!-- end main content  --> 
<?php
	mysql_free_result($result);
?>

โดยส่งค่าในฟอร์มทั้งหมด ไปที่หน้า edit.php
โค้ดหน้า edit.php

<? 
require("function/connectdb.php");
$id = $_GET['id'];
$txtiso = mysql_real_escape_string($_POST['txtiso']);
$txtname = mysql_real_escape_string($_POST['txtname']);
$txtprint_name = mysql_real_escape_string($_POST['txtprint_name']);
$txtiso3 = mysql_real_escape_string($_POST['txtiso3']);
$txtnumcode = mysql_real_escape_string($_POST['txtnumcode']);
$sql = "UPDATE `country` SET iso = '$txtiso',name = '$txtname',printable_name = '$txtprint_name',iso3 = '$txtiso3',numcode = '$txtnumcode' WHERE id = $id";
runSQL($sql);
echo "แก้ไขมูลเรียบร้อย!!";
 ?>

หลังจากที่เสร็จ สิ้น การแก้ไข…. ก็จะปิด funcy dialog พร้อมกับ รีเฟรช ข้อมูล  ด้วย

$.fancybox.close();
$("#flex1").flexReload();

ต่อไปเป็นเหตุการณ์ เมื่อคลิกที่ปุ่ม delete
ส่งค่า id ที่เลือกไปที่หน้า delete.php
delete.php เขียนโค้ด

<? 
require("function/connectdb.php");
$items = rtrim($_POST['items'],",");
$sql = "DELETE FROM `country` WHERE `id` IN ($items)";
runSQL($sql);
$total = mysql_affected_rows();  
echo "Query: ".$sql." - Total affected rows: ".$total;
 ?>

View index.php
flexiqrid-index

View add
flexiqrid-add

View edit

flexiqrid-edit

View delete
flexiqrid-del

หากมาถึงตรงนี้แล้วไม่รู้เรื่อง แนะนำให้กลับไปอ่าน บทความ แรก กับบทความที่สองก่อนนะครับ เพราะจะมีคำอธิบาย ในจุดต่างๆ
ถ้าต้องการเห็นภาพมากกว่านี้ก็ Download All File

mitsumasa