jQuery EasyUI : DataGrid Return

By -

จากบทความก่อน  ผมได้เปิดตัว jQuery EasyUi อย่างเป็นทางการ ว่าผมจะแนะนำการใช้งาน jquery plugsin ตัวนี้ ถ้าเข้ามาอ่านบทความในเว็บแห่งนี้ จะรู้สึกว่าผมให้ความสนใจเกี่ยวกับ data table หรือ  FiexiGrid   แต่ซื้อขนมกินได้เลยว่า ไอ้ตัวที่ผมจะแนะนำต่อไปนี้ มัน มีดีพอที่จะสู้สองตัวที่กล่าวมาแน่นอน และสัญญาว่าจะ แนะนำตั้งแต่ basic จนถึง ใช้งานกับ plugins ตัวอื่น ในjquery easyUi แน่นอนครับ ว่าแล้วก็มาเริ่มกันดีกว่า

สร้างฐานข้อมูล ขอข้ามไปนะครับ ผมใช้ ฐานข้อมูลชื่อ province ถ้าโหลดจากที่นี่ มีแถมไฟล์ให้ด้วย

สร้างไฟล์ชื่อ basic.php เขียนโค้ด

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI TutorialDev.com</title>
   <!-- นำเข้า file ที่เกี่ยวข้อง  -->
	<link rel="stylesheet" type="text/css" href="css/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
   <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<table class="easyui-datagrid" title="Basic DataGrid" style="width:620px;height:250px"
			data-options="singleSelect:true,url:'basic-data.php'">
		<thead>
			<tr>
				<th data-options="field:'runNo',width:60">ลำดับ</th>
				<th data-options="field:'code',width:120">code</th>
				<th data-options="field:'name',width:450,align:'left'">Name</th>
			</tr>
		</thead>
	</table>

</body>
</html>

 

 

ในส่วนของ body ส่วนที่น่าสังเกตุ ที่ dataGird ทำงาน คือ   class=”easyui-datagrid”  และ  data-options=”singleSelect:true,url:’basic-data.php'”

ซึ่งตามตัวอย่าง  singleSelect :true ก็คือ เลือกได้แค่ row เดียว กับ url:’basic-data.php’ คือ  data ถูกโหลด มาในรูปแบบของ json  ที่ไฟล์ basic-data.php

เสร็จแล้วก็สร้างไฟล์ basic-data.php เขียนโค้ด

<?php 
require_once('demoConnect.php'); 

mysql_select_db($database_demoConnect, $demoConnect);
$query = "SELECT provinceId, code, name 
          FROM province";
$proivece = mysql_query($query, $demoConnect) or die(mysql_error());
$aList = array();
$i = 1;
while($row = mysql_fetch_assoc($proivece)){
	$row["runNo"] = $i;
   $aList[] = $row;
	$i++;	
}

echo json_encode($aList);
mysql_free_result($proivece);
?>


 

 

 

หน้านี้ก็ดึงข้อมูลปกติ สุดท้ายก็จบด้วยแปลงให้เป็น json

ไม่อยากจะบอกว่าสวยงามอย่าบอกใครเลยหล่ะ

แค่นี้ก่อนพอหอมปากหอมคอ … เอ่อลืม ไป ถ้ายังไม่เห็นภาพ DEMO  หรือ DOWNLOAD

mitsumasa