Yii2 GridView URL参数优化：自动清除空值查询参数

霞舞

发布时间：2025-11-05 12:21:01

941人浏览过

来源于php中文网

原创

yii2 gridview url参数优化：自动清除空值查询参数

本教程详细介绍了如何在Yii2框架中，特别是结合Kartik GridView使用时，通过修改`yii.gridView.js`文件并配置`assetManager`，实现自动移除URL中未填充或为空的查询参数。此方法避免了直接修改`vendor`目录下的文件，确保了代码的可维护性，并有效优化了URL的整洁性与可读性。

在Yii2应用中，当使用GridView（特别是集成高级过滤功能的如Kartik GridView）进行数据筛选时，经常会遇到URL中包含大量空值的查询参数，例如?fid=&post_code=&pud2_mrn=&pud2_status=PUDP&pud_status=。这些空参数虽然不影响功能，但会使URL显得冗长且不易阅读。本教程旨在提供一种在Yii2服务端层面（通过对客户端JS逻辑的定制）清除这些无用参数的专业方法，而无需依赖复杂的纯前端JavaScript解决方案。

1. 定制 yii.gridView.js 文件

为了避免直接修改vendor目录下的核心文件，我们首先需要将yii.gridView.js复制到项目可控的目录中，例如web/js。

步骤：

从vendor/yiisoft/yii2/assets/gridview/yii.gridView.js路径复制文件到您的项目目录，例如web/js/yii.gridView.js。
打开您复制的web/js/yii.gridView.js文件。
找到applyFilter方法。在该方法内部，定位到即将构建URL查询字符串的部分。具体来说，在以下这行代码之前：
```
var pos = settings.filterUrl.indexOf('?');
```
添加以下JavaScript代码片段：

Vondy
下一代AI应用平台，汇集了一流的工具/应用程序

下载
```
$.each(data, function (name, value) {
    // 检查参数值是否为空数组或空字符串
    // value[0] 通常用于访问数组中的第一个元素，对于单个字符串参数，其长度为0表示空
    if (Array.isArray(value) && value.length === 1 && value[0].length === 0) {
        data[name] = null; // 将空值参数设置为null，以便在URL构建时被忽略
    } else if (typeof value === 'string' && value.length === 0) {
        data[name] = null;
    }
});
```
代码解释：
- $.each(data, function (name, value) { ... }); 遍历即将发送到服务器的所有过滤参数。
- if (Array.isArray(value) && value.length === 1 && value[0].length === 0) 检查那些由输入框生成，但其值为空字符串的数组（例如，fid[] 形式的参数）。
- else if (typeof value === 'string' && value.length === 0) 检查单个字符串参数为空的情况。
- 将data[name] = null; 设置为null后，Yii的URL构建机制在序列化参数时会跳过这些null值的参数，从而实现从URL中移除它们。

2. 配置 Yii2 assetManager

完成对yii.gridView.js的定制后，我们需要告知Yii框架使用我们修改后的版本，而不是vendor目录中的原始版本。这通过配置应用程序的assetManager组件来实现。

在您的应用程序配置文件（通常是config/web.php或config/main.php）中，找到components部分，并添加或修改assetManager配置：

'assetManager' => [
    'bundles' => [
        'yii\grid\GridViewAsset' => [
            // 指定定制JS文件的源路径，这里指向我们复制的JS文件所在的目录
            'sourcePath' => '@webroot/js',
            // 指定定制JS文件在Web可访问目录中的基础路径
            'basePath' => '@webroot/js',
            // 指定定制JS文件在URL中的基础URL
            'baseUrl' => '@web/js', // 或者 'vendor/js' 如果你希望它在vendor子目录下
            // 明确指定使用我们定制的JS文件，覆盖默认的
            'js' => [
                'yii.gridView.js',
            ],
        ],
    ],
],

配置解释：

'yii\grid\GridViewAsset'：这是GridView组件使用的Asset Bundle的类名。我们通过覆盖这个Bundle的配置来引入我们定制的JS文件。
'sourcePath' => '@webroot/js'：告诉Asset Manager去@webroot/js目录查找源文件。
'basePath' => '@webroot/js'：指定Asset Manager将文件发布到@webroot/js目录。
'baseUrl' => '@web/js'：指定浏览器通过@web/js路径访问这些文件。
'js' => ['yii.gridView.js']：这是最关键的部分，它明确指示GridViewAsset应该加载我们自定义的yii.gridView.js文件，从而覆盖了其默认加载的vendor目录下的版本。

注意事项：

请根据您实际存放yii.gridView.js的路径调整sourcePath、basePath和baseUrl。如果您的文件放在web/js下，上述配置是合适的。
清除浏览器缓存：在修改JS文件和配置后，浏览器可能会缓存旧的JS文件。请务必清除浏览器缓存，或在开发模式下禁用缓存，以确保加载的是最新文件。