优化Yii2 GridView URL：自动移除未使用的查询参数

DDD

发布时间：2025-11-06 11:46:24

506人浏览过

来源于php中文网

原创

优化Yii2 GridView URL：自动移除未使用的查询参数

本文详细介绍了如何在yii2框架中，通过修改和重写gridview的javascript资产文件，实现自动移除url中未使用的或空的查询参数，从而优化url的整洁性。该方法避免了直接修改yii2核心文件，保证了系统升级的兼容性，并提供了清晰的配置步骤和代码示例。

在使用Yii2框架的GridView组件时，尤其当结合自定义筛选器（Custom Filter）时，经常会遇到URL中包含大量空值查询参数的情况。例如，一个包含多个筛选条件的URL可能会变成 localhost:20024/consignment?fid=&post_code=&pud2_mrn=&pud2_status=PUDP&pud_status=&pud2_remaining_date=&mrn=&mrn_status=&ioss_number=&declaration_type=&status=&entry_at=&exit_at=&created_at=。这种冗长的URL不仅影响美观，也可能对用户体验和某些SEO场景造成轻微影响。

本教程将提供一种在服务器端（通过修改客户端JavaScript逻辑）解决此问题的方法，避免直接修改Yii2核心的vendor文件，确保解决方案的可维护性和升级兼容性。

解决方案概述

核心思想是拦截GridView在提交筛选器数据时，对其进行预处理。具体来说，我们将复制Yii2 GridView的默认JavaScript文件，并在其中添加逻辑，将所有空字符串的筛选参数值设置为null。Yii2在构建URL时，通常会忽略null值的参数，从而达到移除空参数的目的。最后，通过配置Yii2的AssetManager，让系统使用我们修改后的JavaScript文件，而不是默认的。

实施步骤

1. 复制并修改 yii.gridView.js 文件

首先，我们需要将Yii2 GridView的默认JavaScript文件复制到项目可控的目录中，例如 web/js。这样做是为了避免直接修改 vendor 目录下的文件，从而保证Yii2框架更新时，我们的修改不会被覆盖。

找到源文件： Yii2 GridView的JavaScript文件通常位于 vendor/yiisoft/yii2/assets/yii.gridView.js。请将其复制。
粘贴到目标目录： 将复制的文件粘贴到您的项目 web/js 目录下（如果 js 目录不存在，请创建它）。
修改文件内容： 打开 web/js/yii.gridView.js 文件。找到 applyFilter 方法。在该方法内部，在 var pos = settings.filterUrl.indexOf('?'); 这行代码之前，添加以下JavaScript代码片段：
```
// 在此处添加代码，用于移除空值的查询参数
$.each(data, function (name, value) {
    // 检查值是否为数组且第一个元素为空字符串
    if (Array.isArray(value) && value.length > 0 && value[0].length === 0) {
        data[name] = null; // 将空字符串值设置为null
    } else if (typeof value === 'string' && value.length === 0) {
        data[name] = null; // 对于非数组的空字符串值也设置为null
    }
});

var pos = settings.filterUrl.indexOf('?');
```
代码解释：
- $.each(data, function (name, value) { ... });：这会遍历GridView筛选器提交的所有参数。
- if (Array.isArray(value) && value.length > 0 && value[0].length === 0)：此条件判断参数值是否为数组（例如，某些多选筛选器）且其第一个元素为空字符串。
- else if (typeof value === 'string' && value.length === 0)：此条件判断参数值是否为普通字符串且为空。
- data[name] = null;：将满足上述条件的参数值设置为 null。当Yii2构建URL时，null值的参数通常会被忽略，从而达到移除空参数的目的。

2. 配置 Yii2 AssetManager

为了让Yii2使用我们修改后的 yii.gridView.js 文件，而不是其默认的，我们需要在应用程序的配置文件（通常是 config/web.php 或 config/main.php）中配置 assetManager。

Designs.ai

AI设计工具

下载

在 components 数组中添加或修改 assetManager 配置：

'components' => [
    // ... 其他组件配置 ...
    'assetManager' => [
        'bundles' => [
            'yii\grid\GridViewAsset' => [
                'sourcePath' => '@webroot/js', // 指向你复制的js文件所在的目录
                'basePath' => '@webroot/js',   // 指向你复制的js文件所在的目录
                'baseUrl' => '@web/js',        // 指向浏览器可访问的js文件所在的URL
            ],
        ],
    ],
    // ...
],

配置解释：

yii\grid\GridViewAsset：这是Yii2 GridView组件默认使用的资产包的类名。通过覆盖此配置，我们告诉Yii2，当需要加载 GridViewAsset 时，使用我们自定义的设置。
sourcePath：指定你修改后的 yii.gridView.js 文件在服务器上的物理路径。@webroot/js 会解析为你的项目 web 目录下的 js 文件夹。
basePath：与 sourcePath 类似，通常指向资产文件的根目录。
baseUrl：指定浏览器访问这些资产文件时的URL路径。@web/js 会解析为你的网站根目录下的 js 文件夹的URL。

重要提示： 请确保 sourcePath、basePath 和 baseUrl 的路径设置与您实际复制 yii.gridView.js 的位置相匹配。如果您的文件放在 web/assets/myjs 目录下，则相应的路径也应进行调整。