jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格（DataGrid）
jQuery EasyUI 的 datagrid 组件最强大的功能之一就是可以直接将现有的 HTML <table> 表格转换为功能丰富的 DataGrid，而无需重新定义列或数据源。这非常适合快速升级传统表格页面，立即获得排序、分页、冻结列等高级功能。
官方教程参考：https://www.jeasyui.com/tutorial/datagrid/datagrid1.php
在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Transform+from+Table
步骤 1: 引入 EasyUI 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建一个普通的 HTML 表格
<table id="dg" title="用户列表" style="width:700px;height:400px">
<thead>
<tr>
<th data-options="field:'id',width:80,align:'center'">用户ID</th>
<th data-options="field:'name',width:150">姓名</th>
<th data-options="field:'email',width:200">邮箱</th>
<th data-options="field:'phone',width:120,align:'right'">电话</th>
<th data-options="field:'status',width:80,align:'center'">状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>zhang@example.com</td>
<td>13800138000</td>
<td>启用</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>li@example.com</td>
<td>13900139000</td>
<td>禁用</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>wang@example.com</td>
<td>13700137000</td>
<td>启用</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>步骤 3: JavaScript 一行代码转换
只需在文档加载完成后调用 datagrid() 方法，即可将普通表格转换为 EasyUI DataGrid。
<script type="text/javascript">
$(function(){
$('#dg').datagrid(); // 关键：一行代码转换
});
</script>效果
转换后立即获得以下功能：
- 列标题可点击排序（默认支持字符串和数字排序）。
- 斑马线样式、美化表头。
- 自动计算列宽（fitColumns 默认 false）。
- 支持冻结列、行号等（需额外配置）。
步骤 4: 增强功能（可选配置）
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
pagination: true, // 启用分页（需配合 pageSize）
pageSize: 10,
pageList: [10,20,30],
rownumbers: true, // 显示行号
fitColumns: true, // 自动调整列宽适应容器
singleSelect: true, // 单选
striped: true, // 斑马线
nowrap: false // 允许自动换行
});
});
</script>步骤 5: 完整示例（带分页 + 行号 + 排序）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI - 转换 HTML 表格为 DataGrid</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>将普通 HTML 表格转换为 EasyUI DataGrid</h2>
<table id="dg" class="easyui-datagrid" title="用户管理" style="width:800px;height:500px"
data-options="rownumbers:true,fitColumns:true,singleSelect:true,pagination:true">
<thead>
<tr>
<th data-options="field:'id',width:80,sortable:true">用户ID</th>
<th data-options="field:'name',width:100,sortable:true">姓名</th>
<th data-options="field:'email',width:200">邮箱</th>
<th data-options="field:'phone',width:120">电话</th>
<th data-options="field:'regdate',width:120,sortable:true">注册日期</th>
<th data-options="field:'status',width:80,align:'center'">状态</th>
</tr>
</thead>
<tbody>
<tr><td>001</td><td>张三</td><td>zhang@example.com</td><td>13800138000</td><td>2025-01-01</td><td>启用</td></tr>
<tr><td>002</td><td>李四</td><td>li@example.com</td><td>13900139000</td><td>2025-01-15</td><td>禁用</td></tr>
<tr><td>003</td><td>王五</td><td>wang@example.com</td><td>13700137000</td><td>2025-02-01</td><td>启用</td></tr>
<!-- 可添加更多行测试分页 -->
<tr><td>004</td><td>赵六</td><td>zhao@example.com</td><td>13600136000</td><td>2025-02-20</td><td>启用</td></tr>
<!-- ... 共 20+ 行以触发分页 -->
</tbody>
</table>
<script>
$(function(){
// 如果不写配置，也可简单 $('#dg').datagrid();
// 这里写完整配置演示更多功能
var pager = $('#dg').datagrid('getPager');
pager.pagination({
pageSize: 10,
pageList: [10,20,50],
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
});
</script>
</body>
</html>关键说明
- 列定义：通过
<th data-options="field:'xxx',width:xx">指定字段名和宽度。 - 排序：添加
sortable:true启用列排序。 - 分页：
pagination:true+getPager().pagination({...})配置分页器。 - 优势：无需 AJAX 数据源，直接使用页面已有表格数据，适合静态页面快速升级。
- 限制：数据固定在 HTML 中，不支持动态加载/远程分页（若需远程数据，请使用
url属性）。
适用场景
- 快速美化传统表格页面。
- 静态数据展示（报表导出前预览）。
- 原型开发阶段。
更多示例：
- 官方转换表格：https://www.jeasyui.com/tutorial/datagrid/datagrid1.php
- 带冻结列转换：https://www.jeasyui.com/tutorial/datagrid/datagrid2.php
如果需要从远程 JSON 加载数据、添加工具栏、行编辑等高级功能，请继续提问！
