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 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建一个普通的 HTML 表格
<tableid="dg"title="用户列表"style="width:700px;height:400px"><thead><tr><thdata-options="field:'id',width:80,align:'center'">用户ID</th><thdata-options="field:'name',width:150">姓名</th><thdata-options="field:'email',width:200">邮箱</th><thdata-options="field:'phone',width:120,align:'right'">电话</th><thdata-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。
<scripttype="text/javascript">$(function(){$('#dg').datagrid();// 关键：一行代码转换});</script>效果
转换后立即获得以下功能：
- 列标题可点击排序（默认支持字符串和数字排序）。
- 斑马线样式、美化表头。
- 自动计算列宽（fitColumns 默认 false）。
- 支持冻结列、行号等（需额外配置）。
步骤 4: 增强功能（可选配置）
<scripttype="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: 完整示例（带分页 + 行号 + 排序）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI - 转换 HTML 表格为 DataGrid</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><h2>将普通 HTML 表格转换为 EasyUI DataGrid</h2><tableid="dg"class="easyui-datagrid"title="用户管理"style="width:800px;height:500px"data-options="rownumbers:true,fitColumns:true,singleSelect:true,pagination:true"><thead><tr><thdata-options="field:'id',width:80,sortable:true">用户ID</th><thdata-options="field:'name',width:100,sortable:true">姓名</th><thdata-options="field:'email',width:200">邮箱</th><thdata-options="field:'phone',width:120">电话</th><thdata-options="field:'regdate',width:120,sortable:true">注册日期</th><thdata-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();// 这里写完整配置演示更多功能varpager=$('#dg').datagrid('getPager');pager.pagination({pageSize:10,pageList:[10,20,50],beforePageText:'第',afterPageText:'页 共 {pages} 页',displayMsg:'当前显示 {from} - {to} 条记录 共 {total} 条记录'});});</script></body></html>关键说明
- 列定义：通过
<th>适用场景- 快速美化传统表格页面。
- 静态数据展示（报表导出前预览）。
- 原型开发阶段。
更多示例：
- 官方转换表格：https://www.jeasyui.com/tutorial/datagrid/datagrid1.php
- 带冻结列转换：https://www.jeasyui.com/tutorial/datagrid/datagrid2.php
如果需要从远程 JSON 加载数据、添加工具栏、行编辑等高级功能，请继续提问！
