jQuery EasyUI 数据网格 – 创建自定义视图（千字长文）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，数据展示的灵活性与美观性是提升用户体验的核心要素之一。jQuery EasyUI 数据网格作为一款功能强大的 UI 组件库，提供了丰富的数据展示能力。然而，随着业务需求的复杂化，开发者常常需要突破默认视图的限制，通过创建自定义视图来实现更个性化的数据呈现效果。本文将从基础概念入手，逐步讲解如何通过 EasyUI 的数据网格（DataGrid）组件，结合 HTML、CSS 和 JavaScript 技术，打造符合业务场景的自定义视图。无论是编程初学者还是中级开发者，都能通过本文掌握从理论到实践的完整流程，并通过案例理解关键技巧的运用。

一、理解 EasyUI 数据网格的基础功能

1.1 数据网格的核心作用

数据网格（DataGrid）是 EasyUI 中用于展示结构化数据的核心组件，其功能类似于 Excel 表格或数据库查询结果的可视化呈现。它支持分页、排序、过滤、行操作（如编辑、删除）等基础功能。例如，一个典型的商品列表页面可以通过数据网格快速实现，代码如下：

<table id="dg"></table>
<script>
    $('#dg').datagrid({
        url: '/get-products',
        columns: [[
            {field: 'id', title: 'ID', width: 100},
            {field: 'name', title: '商品名称', width: 200},
            {field: 'price', title: '价格', width: 150}
        ]]
    });
</script>

1.2 默认视图的局限性

虽然默认视图能满足基础需求，但在实际开发中，开发者常遇到以下痛点：

• 数据格式化问题：例如，价格字段需要显示为“¥100.00”而非原始数值。
• 交互复杂性：某些列需要嵌入按钮、图标或动态内容（如星级评分）。
• 视觉差异化：不同状态的行需要高亮显示（如库存不足的商品用红色背景）。

此时，自定义视图便成为解决这些问题的核心手段。

二、自定义视图的实现方法

2.1 模板列（Template Column）：基础定制的起点

模板列允许开发者通过 HTML 模板定义列的内容，是实现自定义视图的最直接方式。

示例：为商品价格添加货币符号

<table id="dg"></table>
<script>
    $('#dg').datagrid({
        columns: [[
            {
                field: 'price',
                title: '价格',
                width: 150,
                // 使用模板列定义内容
                formatter: function(value, row) {
                    return '<span style="color: red;">¥' + value + '</span>';
                }
            }
        ]]
    });
</script>

关键概念解析

• formatter 函数：接受数据行的字段值（value）和完整行对象（row），返回 HTML 字符串。
• 比喻：类似 Excel 中的“条件格式”，但通过代码动态生成内容。

2.2 自定义渲染器：复杂逻辑的处理

当模板列的逻辑复杂时（如根据数据状态渲染不同颜色），可创建独立的渲染函数，并通过 formatter 调用。

案例：根据库存状态显示不同颜色

function inventoryStatusFormatter(value, row) {
    if (row.stock <= 0) {
        return '<span style="background: red; color: white;">缺货</span>';
    } else if (row.stock < 10) {
        return '<span style="background: orange;">库存紧张</span>';
    } else {
        return '<span style="background: green; color: white;">有货</span>';
    }
}

// 列定义中引用渲染器
{
    field: 'stock',
    title: '库存',
    formatter: inventoryStatusFormatter
}

扩展技巧

• 可通过 row 参数访问其他字段，实现跨字段逻辑（例如，结合“预警库存”字段判断状态）。
• 使用 CSS 类代替内联样式，提升代码可维护性。

2.3 行样式（Row Styling）：全局化的视觉控制

若需根据行数据动态修改整行样式（如背景色、字体颜色），可通过 rowStyler 函数实现。

示例：高亮未付款订单

$('#dg').datagrid({
    rowStyler: function(index, row) {
        if (row.paid === false) {
            return 'background-color: #ffeeee; color: #cc0000;';
        }
    }
});

注意事项

• index 是行的索引，row 是数据对象。
• 样式优先级可能受 EasyUI 默认样式影响，建议通过 !important 强制覆盖。

2.4 工具栏与操作按钮：交互增强

通过自定义工具栏（toolbar）和行操作按钮（buttons），可为数据网格添加高级交互功能。

案例：添加“编辑”和“删除”按钮

$('#dg').datagrid({
    toolbar: [
        {
            text: '批量导出',
            iconCls: 'icon-export',
            handler: function() { /* 导出逻辑 */ }
        }
    ],
    columns: [[
        {
            field: 'action',
            title: '操作',
            width: 120,
            formatter: function(value, row) {
                return '<a href="#" onclick="editRow('+ row.id +')">编辑</a> | ' +
                       '<a href="#" onclick="deleteRow('+ row.id +')">删除</a>';
            }
        }
    ]]
});

关键点

• 工具栏支持图标、按钮组和下拉菜单，需引用 EasyUI 的图标类（如 icon-export）。
• 行内按钮需注意事件绑定的动态性，避免因数据刷新导致的事件丢失。

三、进阶技巧与常见问题

3.1 动态列与响应式布局

在自适应页面中，可通过 JavaScript 动态添加或隐藏列，如下所示：

// 根据屏幕宽度动态显示列
if ($(window).width() < 768) {
    $('#dg').datagrid('hideColumn', 'description');
}

3.2 性能优化

• 分页与延迟加载：避免一次性加载大量数据，通过 pageSize 和服务端分页实现。
• 虚拟滚动：当数据量极大时，可结合第三方插件（如 jqGrid）实现虚拟滚动，但需注意与 EasyUI 的兼容性。

3.3 常见问题解答

Q：自定义样式被 EasyUI 覆盖怎么办？
A：使用 !important 或通过 rowStyler 直接设置 CSS 属性。

Q：如何在渲染器中使用外部变量？
A：将变量定义为闭包或全局变量，或通过 row 参数传递。

四、完整案例：电商商品管理视图

4.1 需求分析

假设需实现一个电商商品管理页面，要求：

1. 商品价格显示为“¥X.XX”。
2. 库存量小于 10 的商品用橙色背景高亮。
3. 添加“编辑”和“删除”按钮。
4. 工具栏包含“刷新”和“批量操作”按钮。

4.2 实现代码

<!-- HTML 结构 -->
<table id="productGrid"></table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="refreshGrid()">刷新</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="batchEdit()">批量编辑</a>
</div>

<script>
    // 初始化数据网格
    $('#productGrid').datagrid({
        url: '/api/products',
        toolbar: '#toolbar',
        rowStyler: function(index, row) {
            return row.stock < 10 ? 'background-color: #ffee77;' : '';
        },
        columns: [[
            {field: 'id', title: 'ID', width: 80},
            {field: 'name', title: '商品名称', width: 200},
            {
                field: 'price',
                title: '价格',
                formatter: function(v) {
                    return '¥' + v.toFixed(2);
                }
            },
            {
                field: 'stock',
                title: '库存',
                formatter: function(v, row) {
                    return v + ' 件';
                }
            },
            {
                field: 'action',
                title: '操作',
                formatter: function(v, row) {
                    return '<a href="#" onclick="editProduct('+ row.id +')">编辑</a> | ' +
                           '<a href="#" onclick="deleteProduct('+ row.id +')">删除</a>';
                }
            }
        ]]
    });

    // 工具栏函数
    function refreshGrid() {
        $('#productGrid').datagrid('reload');
    }

    function batchEdit() {
        // 批量编辑逻辑
    }
</script>

4.3 效果演示

• 价格格式化：原始值 100 显示为 ¥100.00。
• 库存高亮：当库存为 5 时，整行背景变为橙色。
• 工具栏按钮：通过 toolbar 参数关联外部 div，实现功能扩展。

五、结论

通过本文的讲解，开发者可以掌握 jQuery EasyUI 数据网格 – 创建自定义视图 的核心方法，包括模板列、渲染器、行样式及工具栏的定制技巧。无论是简单的样式调整，还是复杂的交互逻辑，EasyUI 都提供了灵活的扩展接口。建议读者在实践中逐步尝试以下步骤：

1. 从基础功能开始：先熟悉数据网格的默认配置和基本用法。
2. 分模块定制：先实现某一列的格式化，再扩展到整行样式和交互功能。
3. 代码复用：将常用渲染逻辑封装为公共函数，提升开发效率。

通过结合业务需求，开发者能够将数据网格打造成一个既符合功能规范，又能提升用户体验的“数据仪表盘”。希望本文能为你的 Web 开发之路提供实用参考！