การนำเสนอ และแสดงข้อมูล ด้วย jQuery Flexigrid Plugin เบื้องต้น

30 November 2010 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

flexgrid jquery แสดงข้อมูล

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ flexgrid jquery แสดงข้อมูล

ดูแล้ว 22,537 ครั้ง

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'] ในบรรทัดต่อมา เป็นต้น)
?>

ตัวอย่าง

ข้างต้นเป็นเพียงการนำมาใช้ในบางส่วน เนื้อหา หรือรายละเอียดในส่วนอื่นๆ เพิ่มเติม
จะได้นำมาแนะนำต่อๆ ไป

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ