flexigrid
เป็น jQuery Plugin สำหรับการแสดงเป็นรายการตารางข้อมูล ที่สามารถปรับขนาดของคอลัมน์
ให้สอดคล้องกับข้อมูล รวมทั้งคุณสมบัติในการเชิ่อมต่อกับข้อมูลไฟล์ xml หรือ json โดยใช้ ajax
คุณสมบัติเด่น
---ปรับขนาดของคอลัมน์แสดงหัวข้อรายการเนื้อหาได้
---ปรับขนาดความกว้างและความสูงได้
---สามารถเรียงการแสดงข้อมูลได้โดยการคลิกที่ห้วข้อรายการข้อมูลนั้นๆ
---รูปแบบ theme การแสดงผลที่สวยงาม
---เชื่อมต่อกับข้อมูลทั้ง xml และ json ไฟล์ หรือประยุกต์ข้อมูลจากฐานข้อมูลได้
---กำหนดการแบ่งหน้าข้อมูลตามต้องการได้
---ซ่อน หรือแสดงคอลัมน์ได้
---กำหนดปุ่มควบคุมเพิ่มเติมได้
---กำหนดฟอร์มการค้นหาเพิ่มเติมได้
---และอื่นๆ
สามารถเข้าไปศึกษาการใช้งาน Flexigrid สำหรับ jQuery เพิ่มเติม ได้ด้วยตัวเองที่
http://www.flexigrid.info/
หรือดาวน์โหลดไฟล์พร้อมใช้งานได้ที่
https://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'] ในบรรทัดต่อมา เป็นต้น)
?>
ตัวอย่าง
ข้างต้นเป็นเพียงการนำมาใช้ในบางส่วน เนื้อหา หรือรายละเอียดในส่วนอื่นๆ เพิ่มเติม
จะได้นำมาแนะนำต่อๆ ไป
