jqGrid是一款基于jQuery的功能強大的表格插件，使用jqGrid可以輕松實現(xiàn)前端頁面與后臺數(shù)據(jù)進行ajax異步通信，jqGrid運行速度相當(dāng)快，可以很好的應(yīng)用在一些后臺管理系統(tǒng)來管理大量數(shù)據(jù)的場合。
jqGrid特性：
基于jquery UI主題，開發(fā)者可以根據(jù)客戶要求更換不同的主題。
兼容目前所有流行的web瀏覽器。
Ajax分頁，可以控制每頁顯示的記錄數(shù)。
支持XML，JSON，數(shù)組形式的數(shù)據(jù)源。
提供豐富的選項配置及方法事件接口。
支持表格排序，支持拖動列、隱藏列。
支持滾動加載數(shù)據(jù)。
支持實時編輯保存數(shù)據(jù)內(nèi)容。
支持子表格及樹形表格。
支持多語言。
最關(guān)鍵目前是免費的。
如何使用jqGrid
1、首先，您需要到j(luò)qGrid官網(wǎng)下載最新版本的程序包，您可以從這里下載：http://www.trirand.com/blog/
2、在WEB目錄下分別新建css和js兩個文件夾，放置相關(guān)的css和js文件，創(chuàng)建一個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用來加載數(shù)據(jù)列表，#page用來顯示分頁條的。
4、調(diào)用jqGrid插件，在頁面中加入如下js代碼
$("#list").jqGrid({ caption: '手機產(chǎn)品列表', url:'server.php', datatype: "json", colNames:['編號','名稱','主屏尺寸','操作系統(tǒng)','電池容量', '價格(￥)','操作'], 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" }); 這個時候我們預(yù)覽index.html發(fā)現(xiàn)表格外形已經(jīng)呈現(xiàn)，就差數(shù)據(jù)填充了。如果此時你還看不到任何效果，請檢查你的文件路徑是否正確。
5、加載數(shù)據(jù)。
我們采用php讀取mysql數(shù)據(jù)，返回json格式的數(shù)據(jù)給jqGrid來顯示數(shù)據(jù)。我們準(zhǔn)備一張數(shù)據(jù)表用來記錄手機產(chǎn)品信息，結(jié)構(gòu)如下：
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中讀取數(shù)據(jù)，并輸出json數(shù)據(jù)：
//連接數(shù)據(jù)庫 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); 至此，如果你往數(shù)據(jù)表中錄入數(shù)據(jù)后，就可以在頁面上顯示數(shù)據(jù)表了，然后你可以排序、分頁操作了。接下來我會將jqGrid的選項說明整理成文，分享給大家，然后從項目實際應(yīng)用出發(fā)，舉例講解增加刪除、查看、查找數(shù)據(jù)等業(yè)務(wù)的應(yīng)用。
新聞熱點
疑難解答
