快捷導(dǎo)航

Jqgrid之強大的表格插件應(yīng)用

更新時間：2015年12月02日 10:51:55 投稿：mrr

jqGrid是一款基于jQuery的功能強大的表格插件，使用jqGrid可以輕松實現(xiàn)前端頁面與后臺數(shù)據(jù)進行ajax異步通信，jqGrid運行速度相當(dāng)快，可以很好的應(yīng)用在一些后臺管理系統(tǒng)來管理大量數(shù)據(jù)的場合

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)用。

您可能感興趣的文章: