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

本教程详细介绍了如何在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。

步骤：

1. 从vendor/yiisoft/yii2/assets/gridview/yii.gridView.js路径复制文件到您的项目目录，例如web/js/yii.gridView.js。

2. 打开您复制的web/js/yii.gridView.js文件。

3. 找到applyFilter方法。在该方法内部，定位到即将构建URL查询字符串的部分。具体来说，在以下这行代码之前：

   var pos = settings.filterUrl.indexOf('?');

   添加以下JavaScript代码片段：

   $.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文件。请务必清除浏览器缓存，或在开发模式下禁用缓存，以确保加载的是最新文件。

3. 验证与测试

完成上述配置后，重新加载您的GridView页面。当您使用过滤器进行筛选，并且某些过滤字段留空时，提交表单后观察URL。您会发现那些没有填充值的查询参数将不再出现在URL中，使得URL更加简洁和专业。

例如，原始URL可能为： localhost:20024/consignment?fid=&post_code=&pud2_mrn=&pud2_status=PUDP&pud_status=&mrn=

经过优化后，如果只有pud2_status被填充，URL将变为： localhost:20024/consignment?pud2_status=PUDP

总结

通过以上步骤，我们成功地在Yii2框架中实现了GridView过滤参数的URL优化。这种方法不仅解决了URL冗长的问题，而且遵循了Yii2的最佳实践，即不直接修改vendor目录下的文件，而是通过定制和assetManager配置进行扩展，从而保证了代码的可维护性和项目的长期稳定性。