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

本教程旨在解决yii2 gridview过滤后url中包含大量空值查询参数的问题。通过修改 `yii.gridview.js` 文件并配置 `assetmanager`，我们可以在不直接修改 `vendor` 目录代码的前提下，实现自动移除url中未填充的参数，从而使url更加简洁、美观且易于管理。

在Yii2应用中，当使用 GridView 组件及其自定义过滤器时，尤其是在存在大量过滤字段的情况下，用户在进行过滤操作后，浏览器地址栏的URL可能会变得非常冗长。例如，即使许多过滤字段没有被填充，它们的参数名依然会出现在URL中，且值为一个小写的 null 或空字符串，如 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和URL分享造成不便。

为了解决这一问题，我们可以在参数发送到服务器之前，通过修改 GridView 相关的JavaScript逻辑来移除这些空值参数。以下是详细的实现步骤。

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

由于不建议直接修改 vendor 目录下的核心文件，以避免在项目更新时被覆盖，我们需要将 yii.gridView.js 复制到项目的公共资源目录，并对其进行修改。

操作步骤：

1. 将 vendor/yiisoft/yii2/assets/yii.gridView.js 文件复制到你的 web 目录下的一个自定义JavaScript文件夹中，例如 web/js/。

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

3. 找到 applyFilter 方法，在该方法内部，定位到 var pos = settings.filterUrl.indexOf('?'); 这一行。

4. 在这一行代码之前，添加以下JavaScript代码片段：

   $.each(data, function (name, value) { 
       if (value[0].length === 0) {
           data[name] = null; 
       }
   });

   登录后复制

   代码解释： 这段代码会遍历 GridView 过滤器发送的所有参数 (data 对象)。对于每个参数，它检查其值（通常是数组的第一个元素 value[0]）的长度是否为零。如果长度为零，则表示该参数未被填充，将其值设置为 null。当URL参数被构建时，值为 null 的参数通常会被忽略，从而达到清理URL的目的。

2. 配置 AssetManager 以使用自定义JS文件

完成JavaScript文件的修改后，Yii2仍然会默认加载 vendor 目录下的原始 yii.gridView.js。为了让系统使用我们修改后的版本，需要通过配置 assetManager 来覆盖默认的资源包。

Natural Language Playlist

探索语言和音乐之间丰富而复杂的关系，并使用 Transformer 语言模型构建播放列表。

67

查看详情

操作步骤：

1. 打开你的应用程序配置文件，通常是 config/web.php (或 config/main.php，取决于你的应用结构)。

2. 在 components 配置数组中，找到或添加 assetManager 组件的配置。

3. 在 assetManager 的 bundles 数组中，添加对 yii\grid\GridViewAsset 的覆盖配置：

   'assetManager' => [
       'bundles' => [
           'yii\grid\GridViewAsset' => [
               'sourcePath' => '@webroot/js', // 指向你复制的 yii.gridView.js 所在的目录
               'basePath' => '@webroot/js',   // 同上
               'baseUrl' => '@web/js',        // 指向该目录的URL路径
           ],
       ],
   ],

   登录后复制

   配置解释：

   • 'yii\grid\GridViewAsset'：这是 GridView 组件使用的官方资源包的类名。
   • 'sourcePath' 和 'basePath'：指定了 Yii2 应该从哪个物理路径查找 GridViewAsset 相关的源文件。这里我们将其指向 web/js 目录。
   • 'baseUrl'：指定了浏览器访问这些资源时的基本URL。

3. 验证与注意事项

完成上述步骤后，刷新你的 GridView 页面并尝试进行过滤操作。你会发现，当某些过滤字段未输入任何值时，它们对应的查询参数将不再出现在URL中，使URL变得更加整洁。

注意事项：

• 路径准确性： 确保 sourcePath、basePath 和 baseUrl 的配置与你实际存放 yii.gridView.js 的路径完全匹配。
• 缓存清理： 如果在配置后发现更改未生效，请尝试清理浏览器缓存和Yii2的资产缓存（如果开启了 assetManager 的缓存功能）。
• 影响范围： 此修改会影响所有使用 GridViewAsset 的 GridView 实例。如果你的应用中存在需要保留空值参数的特殊 GridView 场景，可能需要更细粒度的控制，例如通过JavaScript在特定的 GridView 实例上进行处理，而不是全局覆盖。
• 版本兼容性： 本教程基于Yii2的常见版本，但未来Yii2核心库的更新可能会对 yii.gridView.js 的内部结构进行调整。如果遇到问题，请检查新版本的文件结构并相应调整代码。

通过这种方法，我们既解决了URL冗余的问题，又遵循了Yii2的开发最佳实践，避免了直接修改 vendor 目录，从而保证了项目的可维护性和升级的便利性。

以上就是Yii2 GridView URL参数优化：自动移除未使用的查询参数的详细内容，更多请关注php中文网其它相关文章！