第三十二章： DataGrid（數據表格）組件[1]
學習要點：
- 加載方式
- 分頁功能
一、加載方式：
DataGrid以表格形式展示數據，並提供了豐富的選擇、排序、分組和編輯數據的功能支持。DataGrid的設計用於縮短開發時間，並且使開發人員不需要具備特定的知識，它是輕量級的且功能豐富。
1.class加載方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<table class="easyui-datagrid" data-options="width:400">
<thead>
<tr>
<th data-options="field:'user'">賬號</th>
<th data-options="field:'email'">郵箱</th>
<th data-options="field:'date'">註冊時間</th>
</tr>
</thead>
<tbody>
<tr>
<th>蠟筆小新</th>
<th>[email protected]</th>
<th>2014-10-01</th>
</tr>
<tr>
<th>櫻桃小丸子</th>
<th>[email protected]</th>
<th>2014-10-02</th>
</tr>
<tr>
<th>黑崎一護</th>
<th>[email protected]</th>
<th>2014-10-03</th>
</tr>
</tbody>
</table>
</body>
</html>
2.JS調用加載：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<table id="box"></table>
</body>
</html>
$(function(){
$('#box').datagrid({
width:400,
title:'用戶列表',
iconCls:'icon-search',
});
});
二、分頁和排序：
| DataGrid屬性，擴展自Panel面板 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| url | string | 從遠程請求數據。默認值null。 |
| columns | array | DataGrid列配置對象，詳見列屬性說明中更多細節。默認值undefined。 |
| pagination | boolean | 設置爲true，則在DataGrid組件底部顯示分頁工具欄。默認值false。 |
| pageNumber | number | 設置分頁時初始化頁碼。默認值null。 |
| pageSize | number | 設置分頁時設置每頁多少條。默認值10。 |
| pageList | array | 設置分頁時初始化條數選擇大小，默認值爲[10,20,30,40,50]。 |
| pagePosition | array | 設置分頁工具欄的位置。可選值爲：top，buttom，both。默認值：buttom。 |
| 列屬性，在columns裏設置的屬性 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| title | string | 列標題名稱。默認值undefined。 |
| field | string | 列字段名稱。默認值undefined。 |
| width | number | 列的寬度。沒有設置則自適應。默認值undefined。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<table id="box"></table>
</body>
</html>
$(function(){
$('#box').datagrid({
width:400,
//url:'content.json',
url:'user.php',
title:'用戶列表',
iconCls:'icon-search',
columns:[[
{
field:'user',
title:'賬號',
},
{
field:'email',
title:'郵箱',
},
{
field:'date',
title:'註冊時間',
},
]],
pagination:true,
pageSize:5,
pageList:[5,10,15],
pageNumber:1,
pagePosition:'top',
pagePosition:'both',
pagePosition:'bottom',
});
});
[
{
"user":"蠟筆小新",
"emial":"[email protected]",
"date":"2014-10-01",
},
{
"user":"櫻桃小丸子",
"emial":"[email protected]",
"date":"2014-10-02",
},
{
"user":"黑崎一護",
"emial":"[email protected]",
"date":"2014-10-03",
},
]
<?php
header('Content-Type:text/html;chartset=utf-8');
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PWD','123456');
define('DB_NAME','thinkphp');
$conn = @mysql_connect(DB_HOST,DB_USER,DB_PWD)or die('數據庫連接失敗：'.mysql_error());
@mysql_select_db(DB_NAME)or die('數據庫錯誤：'.mysql_error());
@mysql_query('SET NMAES UTF8')or die('字符集錯誤：'.mysql_error());
?>
<?php
require 'config.hph';
$page = $_POST['page'];
$pageSize = $_POST['row'];
$first = $pageSize * ($page - 1);
$query = mysql_query("SELECT user,email,data FROM think_user LIMIT $first,$pageSize") or die('SQL 錯誤！');
$json ='';
while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
$json .= json_encode($row).',';
}
$total = mysql_num_rows(mysql_query("SELECT user,email,data FROM think_user"));
echo '{"total":'.$total.',"rows":['.$json.']}';
$json = substr($json,0,-1);
mysql_close();
?>
<?php
require 'config.hph';
$page = $_POST['page'];
$pageSize = $_POST['row'];
$first = $pageSize * ($page - 1);
$query = mysql_query("SELECT user,email,data FROM think_user LIMIT $first,$pageSize") or die('SQL 錯誤！');
$json ='';
while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
$json .= json_encode($row).',';
}
$total = mysql_num_rows(mysql_query("SELECT user,email,data FROM think_user"));
echo '{"total":'.$total.',"rows":['.$json.']}';
$json = substr($json,0,-1);
mysql_close();
?>
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103088415
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載