การนำเสนอ และแสดงข้อมูล ด้วย jQuery Flexigrid Plugin เบื้องต้น
30 November 2010flexigrid
เป็น jQuery Plugin สำหรับการแสดงเป็นรายการตารางข้อมูล ที่สามารถปรับขนาดของคอลัมน์
ให้สอดคล้องกับข้อมูล รวมทั้งคุณสมบัติในการเชิ่อมต่อกับข้อมูลไฟล์ xml หรือ json โดยใช้ ajax
คุณสมบัติเด่น
---ปรับขนาดของคอลัมน์แสดงหัวข้อรายการเนื้อหาได้
---ปรับขนาดความกว้างและความสูงได้
---สามารถเรียงการแสดงข้อมูลได้โดยการคลิกที่ห้วข้อรายการข้อมูลนั้นๆ
---รูปแบบ theme การแสดงผลที่สวยงาม
---เชื่อมต่อกับข้อมูลทั้ง xml และ json ไฟล์ หรือประยุกต์ข้อมูลจากฐานข้อมูลได้
---กำหนดการแบ่งหน้าข้อมูลตามต้องการได้
---ซ่อน หรือแสดงคอลัมน์ได้
---กำหนดปุ่มควบคุมเพิ่มเติมได้
---กำหนดฟอร์มการค้นหาเพิ่มเติมได้
---และอื่นๆ
สามารถเข้าไปศึกษาการใช้งาน Flexigrid สำหรับ jQuery เพิ่มเติม ได้ด้วยตัวเองที่
http://www.flexigrid.info/
หรือดาวน์โหลดไฟล์พร้อมใช้งานได้ที่
http://www.ninenik.com/download/flexigrid.rar
ดาวน์โหลดไฟล์ แล้วแตกโฟลเดอร์ flexigrid ไว้ใช้งาน
จากนั้นสร้างไฟล์ สำหรับทดสอบ อีก 2 ไฟล์ตามตัวอย่างด้านล่าง
ตัวอย่างโค้ดไฟล์ทดสอบ simple_flexigrid_01.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" />
<title>simple flexigrid jquery plugin</title>
<link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid.css" />
</head>
<body>
<table id="myflexigrid" style="display:none"></table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="flexigrid/flexigrid.pack.js"></script>
<script type="text/javascript">
$(function(){
$("#myflexigrid").flexigrid({ // กำหนดให้สร้าง data grid ให้กับ แท็ก table ที่มี id=myflexigrid
url: 'get_flexigriddata.php', // กำหนด url ของไฟล์ที่จะใช้เชื่อมต่อฐานข้อมูลมาแสดง
dataType: 'json', // กำหนดชนิดของไฟล์ข้อมูลที่ต้องการใช้งานในที่นี้ใช้ json
colModel : [ // กำหนดลักษณะการแสดงของคอลัมน์ในตาราง อ่านคำอธิบายด้านล่าง
{display: 'ลำดับ', name : 'arti_id', width : 40, sortable : true, align: 'center'},
{display: 'หัวข้อบทความ', name : 'arti_topic', width : 500, sortable : true, align: 'left'},
{display: 'คนอ่าน', name : 'hit', width : 40, sortable : true, align: 'center'},
{display: 'วันที่', name : 'adddate', width : 100, sortable : true, align: 'center'}
],
sortname: "arti_id", // กำหนดการจัดเรียงเริ่มต้น เรียงจาก field ใดในฐานข้อมูล
sortorder: "desc", // กำหนดเรียกจากมากไปน้อย หรือน้ยอไปมาก desc / asc
usepager: true, // กำหนดให้แสดงส่วนการแบ่งหน้าหรือไม่ true / false
title: 'รายการบทความใน www.ninenik.com', // หัวข้อตาราง
useRp: false, // กำหนดให้แสดงการ กำหนดจำนวนรายการแสดงต่อหน้า หรือไม่ true / false
rp: 10, // กำหนดจำนวนรายการที่จะแสดงในแต่ละหน้า
showTableToggleBtn: false, // กำหนดให้แสดงปุ่ม ซ่อน / แสดงตารางหรือไม่ true / false
width: 750, // กำหนดความกว้าง
height: 255 // กำหนดความสูง
});
// กำหนดลักษณะการแสดงของคอลัมน์ในตาราง
// display คือ กำหนด ชื่อข้อความที่ต้องการแสดงหัวข้อคอลัมน์
// name คือ ชื่อ field ของตารางในฐานข้อมูลที่สอดคล้องกัน
// widh คือ ความกว้างของคอลัมน์ที่ต้องการแสดง หน่วยเป็น pixel (กำหนดแต่ตัวเลข)
// sortable คือ กำหนดว่าคอลัมน์สามารถทำการเรียงข้อมูลได้หรือไม่ ค่า true / false
// align คือ กำหนดการจัดตำแหน่่งการแสดงข้อมูล ค่า left / center / right
// hide คือ กำหนดให้แสดงหรือไม่แสดงคอลัมน์นั้น ค่า true / false (ส่วนเพิ่มเติม กำหนดหรือไม่ก็ได้)
});
</script>
</body>
</html>
ตัวอย่างโค้ดไฟล์ติดต่อกับฐานข้อมูล
<?php
header("Content-type:text/x-json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// ส่วนการเชื่อมต่อกับฐานข้อมูลอย่างง่าย
mysql_connect("localhost","root","test") or die("Cannot connect the Server");
mysql_select_db("db_test") or die("Cannot select database");
mysql_query("set character set utf8");
// ส่วนของการกำหนดการรับค่ามากำหนดเงือนไข
$page = $_POST['page']; // รับค่าหน้าที่ต้องการนำมาแสดง
$rp = $_POST['rp']; // รับค่าจำนวนแสดงต่อ 1 หน้า
$sortname = $_POST['sortname']; // รับค่าเงื่อนไข field ที่ต้องการจัดเรียง
$sortorder = $_POST['sortorder']; // รับค่ารูปแบบการจัดเรียงข้อมูล
// ส่วนการกำหนดค่า กรณีไม่ได้ส่งค่ามา
if (!$sortname) $sortname = 'arti_id'; // ถ้าไม่ส่งค่ามา กำหนดเป็น field ชื่อ arti_id (ขึ้นกับข้อมูลแต่ละคน)
if (!$sortorder) $sortorder = 'desc'; // ถ้าไม่ส่งรูปแบบการจัดเรียงข้อมูลมา ให้กำหนดเป็น จากมากไปหาน้อย desc
if (!$page) $page = 1; // ถ้าไม่ได้ส่งหน้าที่ต้องการแสดงมา ให้แสดงหน้าแรก เป็น 1
if (!$rp) $rp = 10; // หากไม่กำหนดรายการที่จะแสดงต่อ 1 หน้ามา ให้กำหนดเป็น 10
// ส่วนสำหรับจัดรูปแบบขอบเขตและเงื่อนไขข้อมูลที่ต้องการแสดง
$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp";
$sort = "ORDER BY $sortname $sortorder";
// ส่วนหรับหาว่ามีข้อมูลทั้งหมดเท่าไหร่ เก็บในตัวแปร $total
$q = "SELECT * FROM article WHERE 1 ";
$qr = mysql_query($q);
$total = mysql_num_rows($qr);
// ส่วนสำหรับดึงข้อมูลมาสร้าง json ไฟล์ สำหรับแสดง
$q = "SELECT * FROM article WHERE 1 $sort $limit";
$qr = mysql_query($q);
$data['page'] = intval($page); //
$data['total'] = intval($total); //
while ($row = mysql_fetch_array($qr)) {
$rows[] = array(
"id" => $row['arti_id'],
"cell" => array(
$row['arti_id']
,$row['arti_topic']
,$row['hit']
,date("Y-m-d",$row['adddate'])
)
);
}
$data['rows'] = $rows;
echo json_encode($data);
exit;
//บรรทัดที่ 40 arti_id
// บรรทัดที่ 42 arti_id
// บรรทัดที่ 43 arti_topic
// บรรทัดที่ 44 hit
// บรรทัดที่ 45 date("Y-m-d",$row['adddate'])
// ให้เปลี่ยนไปตามชื่อฟิลด์ของข้อมูลที่ต้องการแสดงของแต่ละคน
// หากมีมากกว่าตัวอย่าง ให้เพิ่มเข้าไปตามต้องการ
// (ในตัวอย่างมีแค่ 4 คอลัมน์ หากมีมากกว่านี้ ให้เพิ่มตามต้องการ
// เช่น เพิ่มเป็น
// ,$row['reply'] ในบรรทัดต่อมา เป็นต้น)
?>
ตัวอย่าง
ข้างต้นเป็นเพียงการนำมาใช้ในบางส่วน เนื้อหา หรือรายละเอียดในส่วนอื่นๆ เพิ่มเติม
จะได้นำมาแนะนำต่อๆ ไป
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 3758 08 Nov 09 เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table อ่าน 8791 13 Oct 08 คำสั่ง SQL BETWEEN อ่าน 11009 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 5265 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 4403 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 4235 08 Jun 09 วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย อ่าน 7190 28 Oct 08 ดึงข้อมูลจาก text ไฟล์มาแสดงด้วย ajax อ่าน 5918 18 Oct 08 รู้จักการใช้งานฟังก์ขัน after() ใน jquery อ่าน 3046 14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 2941 06 Jan 09 สร้างฟังก์ชัน javascript เช็ค check email อย่างง่าย อ่าน 6795 25 Sep 08 ไม่ให้ทำการ คัดลอก ( Copy ) และ วาง ( Paste ) อ่าน 2775 25 Sep 08 ใช้ PHP สร้าง Javascript อย่างง่าย อ่าน 4725 29 Jul 10 สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่น อ่าน 4295 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 1703 09 Oct 09 ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery อ่าน 4123 10 Sep 10 ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่ อ่าน 7740 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 3267 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 20166 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 2530