本节课重点了解 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();
?>