首頁 >web前端 >js教程 >Jqgrid之強大的表格外掛應用程式_jquery

Jqgrid之強大的表格外掛應用程式_jquery

WBOY
WBOY原創
2016-05-16 15:28:101323瀏覽

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的選項說明整理成文,分享給大家,然後從專案實際應用出發,舉例來講解增加刪除、查看、尋找資料等業務的應用程式。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn