Jqgrid之強大的表格外掛應用程式_jquery
- WBOY原創
- 2016-05-16 15:28:101296瀏覽
jqGrid是一款基於jQuery的功能強大的表格插件，使用jqGrid可以輕鬆實現前端頁面與後台數據進行ajax異步通信，jqGrid運行速度相當快，可以很好的應用在一些後台管理系統來管理大量數據的場合。
jqGrid特性：
基於jquery UI主題，開發者可以根據客戶要求更換不同的主題。
相容於目前所有流行的web瀏覽器。
Ajax分頁，可以控制每頁顯示的記錄數。
支援XML，JSON，數組形式的資料來源。
提供豐富的選項配置及方法事件介面。
支援表格排序，支援拖曳列、隱藏列。
支援滾動加載資料。
支援即時編輯保存資料內容。
支援子表格及樹形表格。
支援多語言。
最關鍵目前是免費的。
如何使用jqGrid
1、首先，您需要到jqGrid官網下載最新版本的程式包，您可以從這裡下載：http://www.trirand.com/blog/
2.在WEB目錄下分別新建css和js兩個資料夾，放置相關的css和js文件，建立一個index.html頁面文件，用你喜歡的文字編輯器打開，錄入一下程式碼：
<!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>Grid</title> <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> </head> <body> ... </body> </html>
3、在body中加入以下程式碼：
<table id="list"></table> <div id="pager"></div>
#list用來載入資料列表，#page用來顯示分頁條的。
4、呼叫jqGrid插件，在頁面中加入以下js程式碼
$("#list").jqGrid({
caption: '手机产品列表',
url:'server.php',
datatype: "json",
colNames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(￥)','操作'],
colModel:[
{name:'sn',index:'sn', width:80,align:'center'},
{name:'title',index:'title', width:180},
{name:'size',index:'size', width:120},
{name:'os',index:'os', width:120},
{name:'charge',index:'charge', width:100,align:'center'},
{name:'price',index:'price', width:80,align:'center'},
{name:'opt',index:'opt', width:80, sortable:false, align:'center'}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id',
autowidth: true,
height:280,
viewrecords: true,
multiselect: true,
multiselectWidth: 25,
sortable:true,
sortorder: "asc"
});
這時候我們預覽index.html發現表格外形已經呈現，就差資料填入了。如果此時你還看不到任何效果，請檢查你的檔案路徑是否正確。
5、載入資料。
我們採用php讀取mysql數據，傳回json格式的資料給jqGrid來顯示資料。我們準備一張資料表用來記錄手機產品訊息，結構如下：
CREATE TABLE IF NOT EXISTS `products` ( `id` int(11) NOT NULL AUTO_INCREMENT, `sn` varchar(10) NOT NULL, `title` varchar(60) NOT NULL, `size` varchar(30) NOT NULL, `os` varchar(50) NOT NULL, `charge` varchar(50) DEFAULT NULL, `screen` varchar(50) DEFAULT NULL, `design` varchar(50) DEFAULT NULL, `price` int(10) NOT NULL, `addtime` datetime NOT NULL PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
接著，在server.php中讀取數據，並輸出json數據：
//连接数据库
include_once ('connect.php');
$page = $_GET['page'];
$limit = $_GET['rows'];
$sidx = $_GET['sidx'];
$sord = $_GET['sord'];
if (!$sidx)
$sidx = 1;
$result = mysql_query("SELECT COUNT(*) AS count FROM products where deleted=0");
$row = mysql_fetch_array($result, MYSQL_ASSOC);
$count = $row['count'];
if ($count > 0) {
$total_pages = ceil($count / $limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages)
$page = $total_pages;
$start = $limit * $page - $limit;
$SQL = "SELECT * FROM products WHERE deleted=0 ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query($SQL) or die("Couldn t execute query." . mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i = 0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$responce->rows[$i]['id'] = $row[id];
$opt = "<a href='edit.php'>修改</a>";
$responce->rows[$i]['cell'] = array (
$row[sn],
$row[title],
$row[size],
$row[os],
$row[charge],
$row[price],
$opt
);
$i++;
}
echo json_encode($responce);
至此，如果你往資料表中輸入資料後，就可以在頁面上顯示資料表了，然後你可以排序、分頁操作了。接下來我會將jqGrid的選項說明整理成文，分享給大家，然後從專案實際應用出發，舉例來講解增加刪除、查看、尋找資料等業務的應用程式。