1. 列表组件 datagrid
1.1 创建一个grid.html
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
1.2 引入easyUI的资源文件
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/validate.js"></script>
1.3 绘制表格组件
Html：
<table id='grid0' title="部门管理01" class="easyui-datagrid"
fitColumn="true" pagination="true"
rownumbers="true" url="xxx.php" fit="false" toolbar="#toolbar">
</table>
1.1 编写后台程序，查询部门数据
在当前文件夹，新建一个dept.php
进行数据库连接测试
查询部门表数据，json格式返回：
1.5 分页查询
如果我们想要做分页，就需要给datagrid传递两个参数，分别为total和rows，total代表这个表的查询总数，rows代表分页后查出来的数据。
分页规律：
现在，首先考虑如何在php文件中获取第几页和每页多少条？
在datagrid组件中，只要你设置了分页，就会给后台传递page和rows，分别对应第几页和每页多少条。
代码：
//查询部门表中的数据
$resultset = mysql_query("select * from tm_dept where 1=1 limit $start,$rows") or die(mysql_error());
$list = array();
$count = 0;
while($row = mysql_fetch_array($resultset)){
$list[$count++] = $row;
}
$data = array();
$data["rows"] = $list;
$resultset = mysql_query("select count(*) as total from tm_dept") or die(mysql_error());
while($row = mysql_fetch_array($resultset)){
$data["total"] = $row["total"];
}
echo json_encode($data);
2. 按钮组件 linkbutton
渲染按钮的方法，给一个a标签加上class为easyui-linkbutton 即可。
例子：
<a href="javascript:openUserAddPage()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增用户</a>
3.右下角弹窗组件 $.messager
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）