以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格（DataGrid）”的专业回答。我将详细讲解如何将普通的 HTML 表格转换为 jQuery EasyUI 的 DataGrid，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新稳定版（1.10.x）为参考。
jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格（DataGrid）
目录
1. 引言
jQuery EasyUI 的数据网格（DataGrid）可以将普通的 HTML 表格转换为功能强大的动态表格，支持排序、分页等特性。本教程将从基础到高级，带你掌握如何将 HTML 表格转换为 DataGrid，并提供实用示例。
2. 转换概述
2.1 什么是 HTML 表格到 DataGrid 的转换？
- 定义：转换是指通过 jQuery EasyUI 的 DataGrid 插件，将静态 HTML
<table>元素增强为交互式数据网格，自动解析表格中的数据和列定义。 - 实现方式：对
<table>元素调用datagrid()方法，EasyUI 会读取<thead>和<tbody>内容生成 DataGrid。
2.2 转换的应用场景
- 快速升级：将现有静态表格升级为动态组件。
- 后端渲染：直接使用服务器端生成的 HTML 表格。
- 参考：jQuery EasyUI 官方文档 DataGrid 部分（jeasyui.com）。
3. 实现基础转换
3.1 准备工作
- 引入依赖：需要 jQuery、EasyUI 的核心文件和主题文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
3.2 转换基础 HTML 表格
- 方法：
- 在 HTML 中定义
<table>，包含<thead>（列标题）和<tbody>（数据）。 - 使用
$('#tableId').datagrid()初始化为 DataGrid。 - 示例：
<table id="dg">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>项目 A</td>
</tr>
</tbody>
</table>
<script>
$('#dg').datagrid();
</script>
3.3 实例：基础转换
以下是一个基础转换的完整示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery EasyUI 基础 HTML 表格转换</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<style>
body { padding: 20px; }
</style>
</head>
<body>
<div class="container">
<h2>基础 HTML 表格转换</h2>
<table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>笔记本</td>
<td>2000</td>
</tr>
<tr>
<td>3</td>
<td>平板</td>
<td>800</td>
</tr>
</tbody>
</table>
</div>
<script>
$('#dg').datagrid({
// 可选配置
fitColumns: true
});
</script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：
- HTML 表格转换为 DataGrid，显示 ID、名称和价格三列。
- 列标题和数据自动解析，表格支持基础交互（如调整列宽）。
4. 高级转换配置
4.1 自定义列和数据映射
- 自定义列：通过
data-options属性指定字段名和样式。 - 数据映射：使用
field属性匹配数据字段。 - 示例：
<table id="dg">
<thead>
<tr>
<th data-options="field:'id',width:100">ID</th>
<th data-options="field:'name',width:200">名称</th>
</tr>
</thead>
</table>
4.2 动态转换和交互
- 动态转换：运行时修改表格内容后重新初始化。
- 交互：添加工具栏或事件增强功能。
- 示例：
function addRow() {
$('#dg tbody').append('<tr><td>4</td><td>新项目</td><td>500</td></tr>');
$('#dg').datagrid(); // 重新初始化
}
4.3 实例：带交互的动态转换
以下是一个带交互的动态转换示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery EasyUI 带交互的动态表格转换</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<style>
body { padding: 20px; }
#tb { padding: 5px; }
.tb-item { margin-right: 10px; }
</style>
</head>
<body>
<div class="container">
<h2>带交互的动态表格转换</h2>
<div id="tb">
<a href="#" class="easyui-linkbutton tb-item" iconCls="icon-add" plain="true" onclick="addRow()">添加行</a>
<a href="#" class="easyui-linkbutton tb-item" iconCls="icon-search" plain="true" onclick="getSelectedRow()">获取选中行</a>
</div>
<table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;" toolbar="#tb">
<thead>
<tr>
<th data-options="field:'id',width:100">ID</th>
<th data-options="field:'name',width:200">名称</th>
<th data-options="field:'price',width:150,formatter:function(value){return '¥'+value;}">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>笔记本</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
$('#dg').datagrid({
fitColumns: true,
singleSelect: true
});
function addRow() {
var newId = $('#dg tbody tr').length + 1;
$('#dg tbody').append(`<tr><td>${newId}</td><td>新项目 ${newId}</td><td>500</td></tr>`);
$('#dg').datagrid(); // 重新初始化 DataGrid
$.messager.show({ title: '提示', msg: '已添加新行', timeout: 2000, showType: 'slide' });
}
function getSelectedRow() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.alert('选中行', 'ID: ' + row.id + ', 名称: ' + row.name + ', 价格: ¥' + row.price, 'info');
} else {
$.messager.alert('提示', '请先选择一行！', 'warning');
}
}
// 重写 DataGrid 的默认数据加载逻辑以适配 HTML 表格
$('#dg').datagrid({
loadFilter: function(data) {
var rows = [];
$('#dg tbody tr').each(function() {
var row = {};
$(this).children('td').each(function(i) {
var field = $('#dg thead th').eq(i).attr('data-options').match(/field:'([^']+)'/)[1];
row[field] = $(this).text();
});
rows.push(row);
});
return { total: rows.length, rows: rows };
}
});
</script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：
- HTML 表格转换为 DataGrid，初始显示 ID、名称和价格（价格带 ¥ 格式）。
- 点击“添加行”动态增加新行并重新初始化；点击“获取选中行”显示选中行数据。
- 表格支持单选，选中后可查看详细信息。
5. 最佳实践与注意事项
5.1 设计与实现建议
- 字段映射：使用
data-options中的field属性明确指定列字段，避免数据错位。 - 初始化时机：动态修改表格后及时调用
datagrid()刷新。 - 一致性：保持 HTML 表格结构与 DataGrid 配置一致。
5.2 性能优化与调试
- 性能：大数据量时，避免频繁重新初始化，可考虑直接操作数据源后刷新。
- 调试：检查
loadFilter是否正确解析表格数据，确认列字段与<td>对应。
6. 结论
jQuery EasyUI 的 DataGrid 通过简单调用即可将 HTML 表格转换为动态数据网格，适用于快速升级现有表格。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要获取选中行数据，可参考 jQuery EasyUI 选中行数据 或访问官方文档（jeasyui.com）。
回答特点
- 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
- 实用性：从基础转换到动态交互，覆盖实际需求。
- 内部链接：通过
<a href="#ID">跳转，如 实现基础转换。 - 出站链接：嵌入正文，指向官方文档。
如何运行
- 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。
发表回复