DataGrid( 数据表格) 组件[1]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法，这个组件依赖于
Panel(面板)、Resizeable(调整大小)、LinkButton(按钮)、Pageination(分页)组件。

一． 加载方式
DataGrid 以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能
支持。DataGrid 的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是
轻量级的且功能丰富。
//class 加载方式
<table class=”easyui-datagrid” data-options=”width:400″>
<thead>
<tr>
<th data-options=”field:’username'”>帐号</th>
<th data-options=”field:’email'”>邮件</th>
<th data-options=”field:’create'”>注册时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>蜡笔小新</td><td>xiaoxin@163.com</td><td>2014-10-1</td>
</tr>
<tr>
<td>樱桃小丸子</td><td>yingtao@163.com</td><td>2014-10-2</td>
</tr>
<tr>
<td>黑崎一护</td><td>yihu@163.com</td><td>2014-10-3</td>
</tr>
</tbody>
</table>

//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],
});

//服务器端代码
<?php
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();
?>