本教程详细介绍了如何在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文件。
总结
通过以上步骤，您已经成功地在Yii2应用中实现了GridView URL查询参数的自动清理。这种方法不仅提供了一个干净、专业的解决方案，而且遵循了Yii2的最佳实践，避免了对核心框架文件的直接修改，从而保证了项目的可维护性和升级的便捷性。
