استفاده از jqGrid در PHP

jqGrid از پلاگین های بسیار محبوب است و برای مدیریت داده ها با رابط کاربری Grid استفاده می شود. این کتابخانه , کار مدیریت داده های داینامیک در قالب نمایشی Grid را بسیار ساده کرده است .

این کتابخانه از jQuery برای کنترل عملیات گرید (Grid) که توسط AJAX انجام می شود , بهره می برد.

بنابراین می توانیم به راحتی هر چه تمام تر اطلاعات را در قالب جدول و با امکاناتی نظیر جستجوی سریع بدون لود مجدد صفحه , مدیریت ستون های قابل نمایش و .. را که مطمینا در پروژه های مختلف دیدید را در اختیار ما قرار می دهد.

استفاده از jqGrid در PHP

استفاده از jqGrid در PHP بسیار آسان است و می تواند با زبان های سمت سرور مثل ASP.NET و غیره نیز هماهنگ شود .و همچنین از بیشتر دیتابیس های معروف مانند SQL , MySQL , Oracle و غیره .. نیز پشتیبانی می کند.

می توانیم Bootstrap و Themeroller را نیز برای نمایش Grid هماهنگ کنیم.

با پشتیبانی jqGrid از توابع jQuery و درخواست های AJAX , به راحتی می توانیم آن را برای پروژه های خود هماهنگ کنیم که باعث افزایش سرعت و کیفیت اجرا می شود.

برای مثال اسکریپت mySQL CRUD در PHP را دیدیم . با استفاده از پلاگین jqGrid , به راحتی می توانیم یک پروژه با قابلیت های CRUD در زمان کم و کدنویسی کوتاه تر ایجاد کنیم .

نه تنها CRUD , بلکه jqGrid قابلیت هایی مثل صفحه بندی , مرتب سازی بر حسب ستون , جستجو در جدول و … را به ما می دهد.

jqGrid بصورت سه گانه توسعه یافته است . به این معنا که در هر ورژن جدید , با آخرین نسخه کتابخانه jQuery آپگرید می شود و همچنین با قابلیت های جدید , بهینه سازی ها , .. ارایه می شود .

فراخوانی داده در jqGrid از PHP

برای استفاده از jqGrid در PHP مراحل زیر را باید دنبال کنید :

فراخوانی فایل های جی کوئری و کتابخانه jqGrid
ارسال درخواست AJAX برای گرفتن داده ها از صفحه PHP
لود پاسخ AJAX در قالب jqGrid UI

فراخوانی فایل های جی کوئری و کتابخانه jqGrid

برای استفاده از jqGrid در اسکریپت PHP , نیاز داریم که فایل های CSS و جاوااسکریپت را در تگ <head> بصورت زیر فراخوانی کنید.

<link rel='stylesheet' type='text/css' href='https://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css' />
<link rel='stylesheet' type='text/css' href='http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css' />

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js'></script>        
<script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js'></script>
<script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js'></script>

به جای استفاده از URL سایت رسمی , می توانیم فایل ها را دانلود و بصورت لوکال فراخوانی کنیم.

ارسال درخواست AJAX برای گرفتن داده ها از صفحه PHP

برای ارسال درخواست AJAX برای گرفتن داده های متنی از صفحه PHP , می توانیم از کد جاوااسکریپت زیر بهره ببریم .

<script>
$(document).ready(function () {
$("#list_records").jqGrid({
url: "getGridData.php",
datatype: "json",
mtype: "GET",
colNames: ["User Id", "User Name", "First Name", "Last Name"],
colModel: [
{ name: "userId",align:"right"},
{ name: "userName"},
{ name: "firstName"},
{ name: "lastName"}
],
pager: "#perpage",
rowNum: 10,
rowList: [10,20],
sortname: "userId",
sortorder: "asc",
height: 'auto',
viewrecords: true,
gridview: true,
caption: ""
}); 	
});
</script>

$(document).ready(function () {

$("#list_records").jqGrid({

url: "getGridData.php",

datatype: "json",

mtype: "GET",

colNames: ["User Id", "User Name", "First Name", "Last Name"],

colModel: [

{ name: "userId",align:"right"},

{ name: "userName"},

{ name: "firstName"},

{ name: "lastName"}

pager: "#perpage",

rowNum: 10,

rowList: [10,20],

sortname: "userId",

sortorder: "asc",

height: 'auto',

viewrecords: true,

gridview: true,

caption: ""

});

</script>

این اسکریپت یک درخواست با یک سری پارامترها را به صفحه getGridData.php ارسال می کند . کد php ی که توسط اسکریپت فراخوانی می شود .

<?php 
$conn = mysql_connect("localhost", "root", "") or die("Connection Error: " . mysql_error()); 
mysql_select_db("phppot_examples") or die("Error connecting to db."); 

$page = $_GET['page']; 
$limit = $_GET['rows']; 
$sidx = $_GET['sidx']; 
$sord = $_GET['sord']; 

if(!$sidx) $sidx =1; 

$result = mysql_query("SELECT COUNT(*) AS count FROM users"); 
$row = mysql_fetch_array($result,MYSQL_ASSOC); 

$count = $row['count']; 
if( $count > 0 && $limit > 0) { 
$total_pages = ceil($count/$limit); 
} else { 
$total_pages = 0; 
} 
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
if($start <0) $start = 0; 

$SQL = "SELECT * FROM users ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error()); 

$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row['userId'];
$responce->rows[$i]['cell']=array($row['userId'],$row['userName'],$row['firstName'],$row['lastName']);
$i++;
}
echo json_encode($responce);
?>

<?php

$conn = mysql_connect("localhost", "root", "") or die("Connection Error: " . mysql_error());

mysql_select_db("phppot_examples") or die("Error connecting to db.");

$page = $_GET['page'];

$limit = $_GET['rows'];

$sidx = $_GET['sidx'];

$sord = $_GET['sord'];

if(!$sidx) $sidx =1;

$result = mysql_query("SELECT COUNT(*) AS count FROM users");

$row = mysql_fetch_array($result,MYSQL_ASSOC);

$count = $row['count'];

if( $count > 0 && $limit > 0) {

$total_pages = ceil($count/$limit);

} else {

$total_pages = 0;

}

if ($page > $total_pages) $page=$total_pages;

$start = $limit*$page - $limit;

if($start <0) $start = 0;

$SQL = "SELECT * FROM users ORDER BY $sidx $sord LIMIT $start , $limit";

$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());

$i=0;

while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {

$responce->rows[$i]['id']=$row['userId'];

$responce->rows[$i]['cell']=array($row['userId'],$row['userName'],$row['firstName'],$row['lastName']);

$i++;

}

echo json_encode($responce);

این اسکریپت PHP سطر کاربران را از جدول دیتابیس در فرم یک آرایه php دریافت می کند. این داده آرایه ای با تابع json_encode در php به داده json تبدیل می شود.

با چاپ این داده در صفحه php که توسط ajax فراخوانی می شود , داده در پاسخ درخواست AJAX که توسط تابع javascript ارسال شده , برگشت داده می شود .

این داده JSON پردازش و در jqGrid لود خواهد شد .بعد از آن , اطلاعات کاربران به صورت زیر در قالب رابط کاربری jqGrid نمایش داده می شود.