ホームページ > 記事 > ウェブフロントエンド > Jqgrid の強力なテーブル プラグイン application_jquery
Jqgrid の強力なテーブル プラグイン application_jquery
- WBOYオリジナル
- 2016-05-16 15:28:101315ブラウズ
jqGrid は、jQuery に基づいた強力なテーブル プラグインです。jqGrid を使用すると、フロントエンド ページとバックグラウンド データ間の Ajax 非同期通信を簡単に実装でき、一部のバックグラウンド管理システムで使用できます。大量のデータ状況を管理します。
jqGrid の機能:
jquery UI テーマに基づいて、開発者は顧客の要件に応じてさまざまなテーマを変更できます。
現在一般的に使用されているすべての Web ブラウザと互換性があります。
Ajax ページングでは、各ページに表示されるレコードの数を制御できます。
XML、JSON、配列の形式でデータ ソースをサポートします。
豊富なオプション設定とメソッドイベントインターフェイスを提供します。
テーブルの並べ替え、列のドラッグ、列の非表示をサポートします。
スクロールによるデータ読み込みをサポートします。
データコンテンツのリアルタイム編集と保存をサポートします。
サブテーブルとツリーテーブルをサポートします。
複数の言語をサポートします。
最も重要なことは、現時点では無料であるということです。
jqGrid の使い方
1. まず、jqGrid 公式 Web サイトからパッケージの最新バージョンをダウンロードする必要があります。http://www.trirand.com/blog/
2. WEB ディレクトリに 2 つの新しい 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. 次のコードを本文に追加します。
<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のオプション記述をドキュメントにまとめて全員で共有し、実際のプロジェクトの応用から、データの追加、閲覧、検索などの応用例を説明します。