jQuery Combogrid / DropDownList Grid table (JS)

ใน
jQuery Plugin : jQuery Combogrid สร้าง Combo / DropDownList แบบ Grid table แนะนำ jQuery Plugin : jQuery Combogrid ทุกวันนี้คงไม่มีใครไม่รู้จัก Jquery เพราะว่าในด้านการพัฒนาแอพลิชั่นบนเว็บนั้นดูเหมือนเป็นสิ่งจำเป็นเลยทีเดียว (จริงๆ javascript framework ก็มีหลายตัวนะ) Jquery คืออะไร บทความนี้ผมจะไม่พูดถึงแล้วนะครับ ผมจะข้ามไปที่ส่วนเสริม หรือ plugin ตัวที่ผมจะนำเสนอเลย




jQuery Plugin
ถ้าพูดถึง jquery plugin หลายๆคนคงเคยใช้ เ่ช่น jquery datatable plugin , fancybox , colorbox , lightbox , autocomplete ฯลฯ แต่วันนี่ผมจะพูดถึง Jquery Combogrid 

jQuery Combogrid
Jquery Combogrid คืออะไร ก็คือ plugin หรือ ส่วนเสริมที่มาจากการใช้ Jquery framework ไปต่อยอดเป็นโปรเจคย่อยนั้นเอง Jquery Combogrid นั้นจะรวมเอาความสามารถของ Jquery Datatable และ Jquery Autocomplete มารวมกัน แล้วเอาไว้ทำอะไรล่ะ พูดสั้นๆก็คือเป็นการค้นหา แบบ Autocomplete หรือ Auto suggestions แต่แสดงผล จัดเรียง แบ่งหน้า แบบ Datatable

ตัวอย่าง jquery combogrid

screenshot


วิธีใช้งาน
ส่วนวิธีใช้งานนั้นก็ไม่ยากครับ เพียงแค่ include หรือ เรียกใช้ Jquery ก่อนแล้วเรียก Jquery Combogrid เข้ามาใ้ช้งาน 

index.php

01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
02.<html>
03.<head>
04.<title>Jquery Combogrid</title>
05.<meta name="Generator" content="EditPlus">
06.<meta name="Author" content="Manussawin Sankam">
07.<meta name="Keywords" content="Jquery Combogrid">
08.<meta name="Description" content="Jquery Combogrid">
09.<link rel="stylesheet" type="text/css" media="screen" href="resources/css/smoothness/jquery-ui-1.10.1.custom.css"/>
10.<link rel="stylesheet" type="text/css" media="screen"href="resources/css/smoothness/jquery.ui.combogrid.css"/>
11.<script type="text/javascript" src="resources/jquery/jquery-1.9.1.min.js"></script>
12.<script type="text/javascript" src="resources/jquery/jquery-ui-1.10.1.custom.min.js"></script>
13.<script type="text/javascript" src="resources/plugin/jquery.ui.combogrid-1.6.3.js"></script>
14.<script type="text/javascript">
15.$(function(){
16.$("#name").combogrid({ //กำหนด Input ID ที่ต้องการค้นหา
17.url: 'server.php', //กำหนด url
18.colModel: [{'columnName':'CustomerID','width':'20','label':'CustomerID','align':'left'}, {'columnName':'Name','width':'30','label':'Name','align':'left'},{'columnName':'Email','width':'30','label':'Email','align':'left'},{'columnName':'CountryCode','width':'20','label':'CountryCode','align':'left'}],
19.select: function(event,ui){
20.$(this).val(ui.item.Name); //ให้ค่าตัวมันเองเป็นค่า Name จาก DB
21.$("#CustomerID").val(ui.item.CustomerID);
22.$("#Email").val(ui.item.Email);
23.$("#CountryCode").val(ui.item.CountryCode);
24.return false;
25.}
26.});
27.});
28.</script>
29.</head>
30.<body>
31.<h4>Demo</h4>
32.Name <input type="text" name="name" id='name'>
33.CustomerID <input type="text" name="CustomerID" id='CustomerID'>
34.Email <input type="text" name="Email" id='Email'>
35.CountryCode <input type="text" name="CountryCode" id='CountryCode'>
36.</body>
37.</html>
server.php

01.<?php
02.########################################################################
03.# Description       : PHP+Mysql+Jquery Combogrid Plugin
04.# Author                : Manussawin Sankam
05.# Date              : 2014-02-13
06.########################################################################
07. 
08.$page = $_GET['page']; // get the requested page
09.$limit = $_GET['rows']; // get how many rows we want to have into the grid
10.$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
11.$sord = $_GET['sord']; // get the direction
12.$searchTerm = $_GET['searchTerm'];
13. 
14.if(!$sidx) $sidx =1;
15.if ($searchTerm=="") {
16.$searchTerm="%";
17.} else {
18.$searchTerm = "%" . $searchTerm . "%";
19.}
20. 
21.//เชื่อมต่อ Database
22.$dbhost = "localhost";
23.$dbuser = "root";
24.$dbpassword = "";
25.$database = "mydatabase";
26.$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
27.mysql_select_db($database) or die("Error conecting to db.");
28.$result = mysql_query("SELECT COUNT(*) AS count FROM customer WHERE name like '$searchTerm'");
29.$row = mysql_fetch_array($result,MYSQL_ASSOC);
30.$count = $row['count'];
31.if($count > 0) {
32.$total_pages = ceil($count/$limit);
33.} else {
34.$total_pages = 0;
35.}
36.if ($page > $total_pages) $page=$total_pages;
37.$start = $limit*$page - $limit; // do not put $limit*($page - 1)
38.if($total_pages!=0) $SQL = "SELECT * FROM customer WHERE name like '$searchTerm'  ORDER BY $sidx $sord LIMIT $start , $limit";
39.else $SQL = "SELECT * FROM customer WHERE name like '$searchTerm'  ORDER BY $sidx $sord";
40.$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
41.$response->page = $page;
42.$response->total = $total_pages;
43.$response->records = $count;
44.$i=0;
45.while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
46.$response->rows[$i]['CustomerID']=$row['CustomerID'];
47.$response->rows[$i]['Name']=$row['Name'];
48.$response->rows[$i]['Email']=$row['Email'];
49.$response->rows[$i]['CountryCode']=$row['CountryCode'];
50.$i++;
51.}       
52.echo json_encode($response);
53.?>

ผลลัพธ์
ผลลัพธ์1

ผลลัพธ์ 2