本節課重點了解 EasyUI 中 DataGrid(資料表格)元件的使用方法，這個元件依賴于
Panel(面闆)、Resizeable(調整大小)、LinkButton(按鈕)、Pageination(分頁)元件。
一． 加載方式
DataGrid 以表格形式展示資料，并提供了豐富的選擇、排序、分組和編輯資料的功能
支援。DataGrid 的設計用于縮短開發時間，并且使開發人員不需要具備特定的知識。它是
輕量級的且功能豐富。
//class 加載方式
帳号郵件注冊時間
蠟筆小新[email protected]櫻桃小丸子[email protected]黑崎一護[email protected]
//JS 加載方式
$('#box').datagrid({
width : 400,
columns : [[
{
field : 'username',
title : '帳号',
},
{
field : 'email',
title : '郵件',
},
{
field : 'date',
title : '注冊時間',
},
]],
});
二．分頁和排序
//分頁和排序
$('#box').datagrid({
url : 'user.php',
width : 500,
title : '使用者清單',
iconCls : 'icon-search',
columns : [[
{
field : 'user',
title : '帳号',
},
{
field : 'email',
title : '郵件',
},
{
field : 'date',
title : '注冊時間',
},
]],
pagination : true,
idField : 'id',
pageSize : 10,
pageList : [10, 20, 30, 40],
});
//伺服器端代碼
require 'config.php';
$page = $_POST['page'];
$pageSize = $_POST['rows'];
$first = $pageSize * ($page - 1);
$query = mysql_query("SELECT user,email,date 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,date FROM
think_user"));
$json = substr($json, 0, -1);
echo '{"total":'.$total.',"rows":['.$json.']}';
mysql_close();
?>