以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 创建自定义视图（Custom View）”的专业回答。我将详细讲解如何在 jQuery EasyUI 中为数据网格（DataGrid）创建自定义视图，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新稳定版（1.10.x）为参考。
jQuery EasyUI 数据网格 – 创建自定义视图（Custom View）
目录
1. 引言
jQuery EasyUI 的数据网格（DataGrid）是一个强大的组件，支持多种视图模式，默认提供表格视图。自定义视图（Custom View）允许开发者根据需求灵活调整数据展示方式，例如创建卡片视图（Card View）或树形视图。本教程将从基础到高级，带你掌握如何为 DataGrid 创建自定义视图，并提供实用示例。
2. 自定义视图概述
2.1 什么是自定义视图？
- 定义：自定义视图是 jQuery EasyUI DataGrid 的一种扩展机制，通过重写
view对象的渲染逻辑，自定义行和单元格的显示方式。 - 实现方式：基于
$.fn.datagrid.defaults.view扩展，覆盖render方法，结合 HTML 和 CSS 实现特定布局。
2.2 自定义视图的应用场景
- 卡片展示：将数据以卡片形式排列，适用于产品列表或新闻摘要。
- 复杂布局：如带有展开详情的分层视图或自定义图形界面。
- 参考：jQuery EasyUI 官方文档 DataGrid View 部分（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 创建基础自定义视图
- 方法：通过
$.extend扩展默认视图，定义render方法生成卡片布局。 - 示例：
var cardView = $.extend({}, $.fn.datagrid.defaults.view, {
render: function(target, container, frozen) {
var rows = $(target).datagrid('getRows');
var html = [];
for (var i = 0; i < rows.length; i++) {
html.push('<div class="card-item" style="width: 200px; margin: 10px; padding: 10px; border: 1px solid #ccc; float: left;">');
html.push('<p>ID: ' + rows[i].id + '</p>');
html.push('<p>Name: ' + rows[i].name + '</p>');
html.push('</div>');
}
$(container).html(html.join(''));
}
});
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 基础卡片视图</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>
.card-item { width: 200px; margin: 10px; padding: 10px; border: 1px solid #ccc; float: left; }
</style>
</head>
<body>
<div class="container" style="padding: 20px;">
<h2>基础卡片视图</h2>
<table id="dg" class="easyui-datagrid" style="width: 100%; height: 300px;"></table>
</div>
<script>
var cardView = $.extend({}, $.fn.datagrid.defaults.view, {
render: function(target, container, frozen) {
var rows = $(target).datagrid('getRows');
var html = [];
for (var i = 0; i < rows.length; i++) {
html.push('<div class="card-item">');
html.push('<p>ID: ' + rows[i].id + '</p>');
html.push('<p>Name: ' + rows[i].name + '</p>');
html.push('</div>');
}
$(container).html(html.join(''));
}
});
$('#dg').datagrid({
view: cardView,
data: [
{ id: 1, name: '项目 1' },
{ id: 2, name: '项目 2' },
{ id: 3, name: '项目 3' }
],
columns: [[
{ field: 'id', title: 'ID', width: 100 },
{ field: 'name', title: '名称', width: 100 }
]]
});
</script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：显示一个数据网格，数据以卡片形式排列，每张卡片包含 ID 和名称，呈浮动布局。
4. 高级自定义视图配置
4.1 自定义视图的扩展与样式
- 扩展功能：
- 添加
renderRow方法自定义单行渲染。 - 支持冻结列（frozen columns）或分页。
- 样式：通过 CSS 调整卡片大小、边距和阴影。
- 示例：
var advancedCardView = $.extend({}, $.fn.datagrid.defaults.view, {
render: function(target, container, frozen) {
var rows = $(target).datagrid('getRows');
var html = [];
for (var i = 0; i < rows.length; i++) {
html.push(this.renderRow(target, rows[i], i));
}
$(container).html(html.join(''));
},
renderRow: function(target, row, index) {
return '<div class="card-item advanced" style="box-shadow: 0 2px 5px rgba(0,0,0,0.1);">' +
'<p><strong>ID:</strong> ' + row.id + '</p>' +
'<p><strong>Name:</strong> ' + row.name + '</p>' +
'</div>';
}
});
4.2 动态视图和交互
- 方法：结合事件（如
onClickRow）和动态数据更新视图。 - 示例：点击卡片高亮显示：
$('#dg').datagrid({
onClickRow: function(index, row) {
$('.card-item').removeClass('active');
$('.card-item').eq(index).addClass('active');
}
});
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>
.card-item { width: 200px; margin: 10px; padding: 10px; border: 1px solid #ccc; float: left; transition: all 0.3s; }
.card-item.active { background: #e0f7fa; border-color: #007bff; }
.btn { margin: 5px; }
</style>
</head>
<body>
<div class="container" style="padding: 20px;">
<h2>带交互的动态卡片视图</h2>
<button class="btn easyui-linkbutton" onclick="addItem()">添加项目</button>
<button class="btn easyui-linkbutton" onclick="clearItems()">清空列表</button>
<table id="dg" class="easyui-datagrid" style="width: 100%; height: 400px;"></table>
</div>
<script>
var dynamicCardView = $.extend({}, $.fn.datagrid.defaults.view, {
render: function(target, container, frozen) {
var rows = $(target).datagrid('getRows');
var html = [];
for (var i = 0; i < rows.length; i++) {
html.push(this.renderRow(target, rows[i], i));
}
$(container).html(html.join(''));
},
renderRow: function(target, row, index) {
return '<div class="card-item" data-index="' + index + '">' +
'<p><strong>ID:</strong> ' + row.id + '</p>' +
'<p><strong>Name:</strong> ' + row.name + '</p>' +
'<p><strong>Status:</strong> ' + row.status + '</p>' +
'</div>';
}
});
$('#dg').datagrid({
view: dynamicCardView,
data: [
{ id: 1, name: '项目 1', status: '进行中' }
],
columns: [[
{ field: 'id', title: 'ID', width: 100 },
{ field: 'name', title: '名称', width: 100 },
{ field: 'status', title: '状态', width: 100 }
]],
onClickRow: function(index, row) {
$('.card-item').removeClass('active');
$('.card-item[data-index="' + index + '"]').addClass('active');
$.messager.show({
title: '提示',
msg: '选中: ' + row.name,
timeout: 2000,
showType: 'slide'
});
}
});
let itemCount = 1;
function addItem() {
itemCount++;
$('#dg').datagrid('appendRow', {
id: itemCount,
name: '项目 ' + itemCount,
status: '新建'
});
}
function clearItems() {
$('#dg').datagrid('loadData', [{ id: 1, name: '项目 1', status: '进行中' }]);
itemCount = 1;
}
</script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：
- 初始显示“项目 1”卡片，包含 ID、名称和状态。
- 点击“添加项目”动态增加新卡片；点击卡片高亮并弹出提示。
- 点击“清空列表”重置为初始状态。
5. 最佳实践与注意事项
5.1 设计与实现建议
- 视图逻辑：保持
render方法简洁，复杂逻辑放入renderRow。 - 样式分离：将 CSS 放入外部样式表，便于维护。
- 响应式：使用 CSS 媒体查询适配不同屏幕尺寸。
5.2 性能优化与调试
- 性能：大量数据时，使用分页或虚拟滚动（如
scrollview），避免一次性渲染过多 DOM。 - 调试：检查
render是否正确调用，确认数据更新后视图同步刷新。
6. 结论
jQuery EasyUI 的自定义视图通过扩展 view 对象，为 DataGrid 提供了灵活的展示方式，特别适合卡片式布局或特殊需求。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要表格视图扩展，可参考 jQuery EasyUI DataGrid 文档 或访问官方文档（jeasyui.com）。
回答特点
- 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
- 实用性：从静态卡片视图到动态交互，覆盖实际需求。
- 内部链接：通过
<a href="#ID">跳转，如 实现基础自定义视图。 - 出站链接：嵌入正文，指向官方文档。
如何运行
- 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。
发表回复