Yii2 GridView URL参数清理：自动移除未使用的查询参数_技术教程

本教程详细介绍了如何在yii2框架中，通过修改gridview的javascript资产配置，实现url中未使用的或空的查询参数的自动移除，从而使url更简洁、可读。该方法避免了直接修改vendor目录文件，保证了项目维护的便捷性。

在Yii2应用中，当使用GridView组件配合自定义过滤器时，浏览器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显得混乱，也可能影响用户体验。本教程将指导您如何在不直接修改Yii核心文件的前提下，通过覆盖GridView的JavaScript资产来自动清理这些参数。

解决方案概述

核心思想是拦截GridView在构建URL时传递给jQuery AJAX请求的数据，在数据发送前将所有空字符串值转换为null。jQuery的$.param方法在序列化数据时，会自动忽略值为null的参数，从而达到清理URL的目的。为了实现这一点，我们将复制并修改yii.gridView.js文件，并通过Yii的资产管理器（assetManager）机制，让应用加载我们修改后的版本。

实施步骤

步骤一：复制并准备yii.gridView.js文件

首先，您需要将Yii2框架自带的yii.gridView.js文件复制到您的项目web目录下，例如web/js。这样做是为了避免直接修改vendor目录下的文件，确保在框架更新时不会丢失您的改动。

# 假设您的项目根目录为当前目录
cp vendor/yiisoft/yii2/assets/yii.gridView.js web/js/yii.gridView.js

步骤二：修改自定义的yii.gridView.js文件

打开您刚刚复制到web/js/yii.gridView.js的文件。找到applyFilter方法，在该方法内部，定位到var pos = settings.filterUrl.indexOf('?');这一行代码。在此行代码之前，插入以下JavaScript代码：

// web/js/yii.gridView.js
// ... (文件原有内容)

$.each(data, function (name, value) {
    // 检查值是否为数组且第一个元素为空字符串，或者值本身就是空字符串
    if ((Array.isArray(value) && value.length > 0 && value[0].length === 0) || (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) || (typeof value === 'string' && value.length === 0))：这个条件判断用于识别两种情况的空值：
- 当参数值是一个数组（例如，某些多选过滤器）且其第一个元素是空字符串时。
- 当参数值本身就是一个空字符串时。
data[name] = null;：如果参数值符合上述空值条件，我们将其设置为null。当jQuery的$.param方法序列化数据时，所有值为null的键值对都将被忽略，从而不会出现在最终的URL中。

步骤三：配置Yii的资产管理器

最后一步是告诉Yii框架，当需要加载yii\grid\GridViewAsset时，使用您修改后的yii.gridView.js文件，而不是vendor目录下的原始文件。这需要在您的应用配置文件（通常是config/web.php或config/main.php）中配置assetManager组件。

在您的配置文件中，找到components数组，并添加或修改assetManager的配置如下：

// config/web.php 或 config/main.php
return [
    // ... 其他配置
    'components' => [
        // ... 其他组件
        'assetManager' => [
            'bundles' => [
                'yii\grid\GridViewAsset' => [
                    'sourcePath' => '@webroot/js', // 指向您存放修改后js文件的目录
                    'basePath' => '@webroot/js',   // 同样指向该目录
                    'baseUrl' => '@web/js',        // 指向该目录的URL别名
                ],
            ],
        ],
        // ... 其他组件
    ],
    // ... 其他配置
];

配置解释：

'yii\grid\GridViewAsset'：这是您要覆盖的资产包的类名。
'sourcePath' => '@webroot/js'：指定了Yii应该在哪里查找这个资产包的源文件。@webroot是一个别名，通常指向您的web目录。
'basePath' => '@webroot/js'：指定了资产发布后存储的基路径。在这里，我们让它和sourcePath相同，表示直接从该目录加载。
'baseUrl' => '@web/js'：指定了资产发布后可访问的URL基路径。@web是您的应用web目录的URL别名。

重要提示： 请确保sourcePath、basePath和baseUrl中的路径与您实际存放yii.gridView.js文件的位置相匹配。

效果验证与注意事项

完成以上步骤后，刷新您的GridView页面并尝试使用过滤器。您会发现，URL中不再包含那些未填写或为空的查询参数，URL将变得更加简洁和可读。

注意事项：

路径准确性： 务必确保assetManager配置中的路径是正确的，否则Yii将无法找到您的自定义JavaScript文件。
缓存清理： 在某些情况下，浏览器或Yii的资产缓存可能需要清理才能看到更改生效。您可以尝试清除浏览器缓存，或在开发模式下运行Yii（YII_ENV_DEV为true）以禁用资产缓存。
框架更新： 虽然这种方法避免了修改vendor目录，但如果Yii框架在未来的版本中对yii.gridView.js的内部结构或applyFilter方法进行了重大更改，您可能需要重新检查并更新您自定义的yii.gridView.js文件。