异常教程

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 框架，其数据网格（DataGrid）组件凭借灵活的配置和丰富的功能，成为开发者构建表格化数据展示的首选工具。然而，当数据量较大或业务场景复杂时，如何实现精准的行过滤功能，成为提升用户体验的关键。本文将围绕 "jQuery EasyUI 扩展 – 数据网格行过滤" 这一主题，从基础概念到实战案例，逐步解析如何通过扩展与自定义实现高效的数据过滤能力。

功能概述：数据网格行过滤的必要性

数据网格（DataGrid）类似于 Excel 表格，用于展示和操作结构化数据。然而，当数据量超过百条时，用户需要快速定位特定行，此时行过滤功能便如同“数据筛选器”一样，帮助用户精准筛选出目标内容。

类比理解：行过滤就像图书分类架

想象一个图书馆的书架，如果没有分类标签，读者需要逐本翻找；而通过“作者”“年代”“类型”等标签过滤后，书籍会被快速分组，用户能直接找到目标。数据网格的行过滤功能正是通过类似逻辑，允许用户根据字段值筛选数据，从而提升操作效率。

核心原理与实现步骤

1. 数据网格的基础配置

在实现行过滤前，需先掌握数据网格的基础用法。以下是一个简单的初始化代码示例：

<table id="dataGrid" class="easyui-datagrid"  
        style="width:100%;height:auto"  
        url="/api/data"  
        fitColumns="true"  
        singleSelect="true"  
        pagination="true">  
    <thead>  
        <tr>  
            <th field="id" width="50">ID</th>  
            <th field="name" width="100">名称</th>  
            <th field="category" width="100">分类</th>  
            <th field="price" width="80">价格</th>  
        </tr>  
    </thead>  
</table>

2. 行过滤的核心逻辑

行过滤的核心是根据用户输入或预设条件，动态筛选数据网格中的行。其核心步骤如下：

  1. 数据源获取：从服务器或本地获取原始数据。
  2. 过滤条件定义：确定过滤规则（如字段值包含特定字符串）。
  3. 数据筛选：根据规则过滤数据集。
  4. 视图更新：将过滤后的数据重新渲染到网格中。

扩展方法：实现行过滤的两种方式

方式一：基于 EasyUI 原生功能的简单过滤

EasyUI 提供了 doFilter 方法，可直接调用以实现快速过滤。

实现步骤：

  1. 添加搜索框：在页面中添加输入框作为过滤条件输入区域。

    <input id="filterInput" type="text" placeholder="输入名称过滤..." />

  2. 绑定事件触发过滤：监听输入框的 keyup 事件，触发过滤操作。

    $('#filterInput').on('keyup', function() {  
    const keyword = $(this).val();  
    $('#dataGrid').datagrid('doFilter', {  
        name: keyword  // 过滤名称字段  
    });  
});

注意事项：

  • doFilter 方法默认仅支持精确匹配，若需模糊匹配（如包含关键字），需结合正则表达式或自定义逻辑。
  • 此方法会直接修改数据网格的显示数据，但不会触发数据请求，因此适用于客户端数据量较小的场景。

方式二：自定义行过滤扩展（支持复杂逻辑）

对于需要多条件组合或自定义算法的场景，需通过扩展 datagrid 方法实现。

步骤分解：

  1. 定义扩展方法：在 EasyUI 的 datagrid 方法中添加自定义过滤逻辑。

    $.extend($.fn.datagrid.defaults.viewOptions, {  
    onBeforeRenderRow: function(rowData) {  
        // 自定义过滤条件，返回 true 表示保留该行  
        return rowData.price > 100 && rowData.category === '电子';  
    }  
});

  2. 动态触发过滤：通过按钮或事件触发过滤操作。

    function applyFilter() {  
    const minPrice = 100;  
    const category = '电子';  
    $('#dataGrid').datagrid('loadData', {  
        total: 0,  // 重置数据以触发过滤  
        rows: []  
    });  
    // 重新加载原始数据并应用过滤  
    $('#dataGrid').datagrid('load');  
}

扩展优势：

  • 支持复杂条件组合（如价格区间、多字段联合筛选）。
  • 可通过 onBeforeRenderRow 钩子实现动态条件判断。

实战案例：电商商品列表的动态过滤

场景描述

假设我们有一个电商商品列表，需要根据“分类”“价格区间”和“关键词”实现多条件过滤。

HTML 结构：

<div class="filter-panel">  
    <select id="categoryFilter">  
        <option value="">全部分类</option>  
        <option value="电子">电子</option>  
        <option value="服装">服装</option>  
    </select>  
    <input id="priceMin" type="number" placeholder="最低价">  
    <input id="priceMax" type="number" placeholder="最高价">  
    <button onclick="applyAdvancedFilter()">应用过滤</button>  
</div>

JavaScript 逻辑：

function applyAdvancedFilter() {  
    const category = $('#categoryFilter').val();  
    const priceMin = parseFloat($('#priceMin').val() || 0);  
    const priceMax = parseFloat($('#priceMax').val() || Infinity);  

    // 自定义过滤函数  
    const filteredRows = $('#dataGrid').datagrid('getData').rows.filter(row => {  
        const passCategory = !category || row.category === category;  
        const passPrice = row.price >= priceMin && row.price <= priceMax;  
        return passCategory && passPrice;  
    });  

    // 更新数据并保持分页状态  
    $('#dataGrid').datagrid('loadData', { rows: filteredRows });  
}

关键点解析：

  • 数据获取：通过 $('#dataGrid').datagrid('getData').rows 获取当前数据集。
  • 条件组合：通过逻辑运算符 && 和 || 组合多个过滤条件。
  • 分页处理：直接更新 rows 会重置分页，若需保留分页需结合服务器端分页逻辑。

高级技巧与性能优化

1. 客户端过滤 vs 服务器端过滤

  • 客户端过滤：适合数据量较小的场景，直接操作浏览器内存数据，响应速度快。
  • 服务器端过滤：适合百万级数据，通过 API 参数传递过滤条件，由后端处理后返回结果。

混合方案：

// 服务器端过滤示例  
function applyServerFilter() {  
    const params = {  
        category: $('#categoryFilter').val(),  
        price_min: $('#priceMin').val(),  
        price_max: $('#priceMax').val()  
    };  
    $('#dataGrid').datagrid('load', params);  
}

2. 缓存优化

为避免重复请求，可缓存原始数据并仅在必要时重新加载：

let originalData = null;  
$('#dataGrid').datagrid({  
    onLoadSuccess: function(data) {  
        originalData = data.rows;  
    }  
});  

function applyFilter() {  
    const filtered = originalData.filter(...);  
    $('#dataGrid').datagrid('loadData', { rows: filtered });  
}

常见问题与解决方案

问题1：过滤后分页失效

原因：客户端过滤会直接修改 rows 数据，但未更新分页总数。
解决方案：手动更新分页信息或使用服务器端过滤。

问题2：中文模糊搜索不匹配

原因：默认过滤方法不支持中文模糊匹配。
解决方案：使用正则表达式或 includes() 方法：

// 支持中文模糊匹配的过滤函数  
const keyword = '手机';  
const filtered = rows.filter(row => row.name.includes(keyword));

结论

通过本文的讲解，我们深入理解了 jQuery EasyUI 数据网格行过滤 的实现原理与扩展方法。从基础的 doFilter 方法到复杂的自定义扩展，再到实际案例与性能优化策略，开发者可以灵活选择适合自身项目的方案。掌握这一技能不仅能提升数据展示的交互体验，更能为构建复杂业务系统打下坚实基础。

在实际开发中，建议根据数据量和业务需求选择客户端或服务器端过滤方案，并通过缓存和事件优化提升性能。希望本文能成为您探索 EasyUI 功能扩展的实用指南！

最新发布

查看更多文章