本文详细介绍了如何在yii2框架中，通过修改和重写gridview的javascript资产文件，实现自动移除url中未使用的或空的查询参数，从而优化url的整洁性。该方法避免了直接修改yii2核心文件，保证了系统升级的兼容性，并提供了清晰的配置步骤和代码示例。
在使用Yii2框架的GridView组件时，尤其当结合自定义筛选器（Custom Filter）时，经常会遇到URL中包含大量空值查询参数的情况。例如，一个包含多个筛选条件的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不仅影响美观，也可能对用户体验和某些SEO场景造成轻微影响。
本教程将提供一种在服务器端（通过修改客户端JavaScript逻辑）解决此问题的方法，避免直接修改Yii2核心的vendor文件，确保解决方案的可维护性和升级兼容性。
解决方案概述
核心思想是拦截GridView在提交筛选器数据时，对其进行预处理。具体来说，我们将复制Yii2 GridView的默认JavaScript文件，并在其中添加逻辑，将所有空字符串的筛选参数值设置为null。Yii2在构建URL时，通常会忽略null值的参数，从而达到移除空参数的目的。最后，通过配置Yii2的AssetManager，让系统使用我们修改后的JavaScript文件，而不是默认的。
实施步骤
1. 复制并修改 yii.gridView.js 文件
首先，我们需要将Yii2 GridView的默认JavaScript文件复制到项目可控的目录中，例如 web/js。这样做是为了避免直接修改 vendor 目录下的文件，从而保证Yii2框架更新时，我们的修改不会被覆盖。
找到源文件：Yii2 GridView的JavaScript文件通常位于 vendor/yiisoft/yii2/assets/yii.gridView.js。请将其复制。
粘贴到目标目录：将复制的文件粘贴到您的项目 web/js 目录下（如果 js 目录不存在，请创建它）。
修改文件内容：打开 web/js/yii.gridView.js 文件。找到 applyFilter 方法。在该方法内部，在 var pos = settings.filterUrl.indexOf(‘?’); 这行代码之前，添加以下JavaScript代码片段：
// 在此处添加代码，用于移除空值的查询参数$.each(data, function (name, value) { // 检查值是否为数组且第一个元素为空字符串 if (Array.isArray(value) && value.length > 0 && value[0].length === 0) { data[name] = null; // 将空字符串值设置为null } else if (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)：此条件判断参数值是否为数组（例如，某些多选筛选器）且其第一个元素为空字符串。else if (typeof value === ‘string’ && value.length === 0)：此条件判断参数值是否为普通字符串且为空。data[name] = null;：将满足上述条件的参数值设置为 null。当Yii2构建URL时，null值的参数通常会被忽略，从而达到移除空参数的目的。
2. 配置 Yii2 AssetManager
为了让Yii2使用我们修改后的 yii.gridView.js 文件，而不是其默认的，我们需要在应用程序的配置文件（通常是 config/web.php 或 config/main.php）中配置 assetManager。
在 components 数组中添加或修改 assetManager 配置：
'components' => [ // ... 其他组件配置 ... 'assetManager' => [ 'bundles' => [ 'yiigridGridViewAsset' => [ 'sourcePath' => '@webroot/js', // 指向你复制的js文件所在的目录 'basePath' => '@webroot/js', // 指向你复制的js文件所在的目录 'baseUrl' => '@web/js', // 指向浏览器可访问的js文件所在的URL ], ], ], // ...],
配置解释：
yiigridGridViewAsset：这是Yii2 GridView组件默认使用的资产包的类名。通过覆盖此配置，我们告诉Yii2，当需要加载 GridViewAsset 时，使用我们自定义的设置。sourcePath：指定你修改后的 yii.gridView.js 文件在服务器上的物理路径。@webroot/js 会解析为你的项目 web 目录下的 js 文件夹。basePath：与 sourcePath 类似，通常指向资产文件的根目录。baseUrl：指定浏览器访问这些资产文件时的URL路径。@web/js 会解析为你的网站根目录下的 js 文件夹的URL。
重要提示：请确保 sourcePath、basePath 和 baseUrl 的路径设置与您实际复制 yii.gridView.js 的位置相匹配。如果您的文件放在 web/assets/myjs 目录下，则相应的路径也应进行调整。
验证与测试
完成以上步骤后，清除浏览器缓存，然后刷新包含GridView的页面并尝试使用筛选器。您会发现，当筛选器输入框为空时，相应的查询参数将不再出现在URL中，从而使URL更加简洁。
总结
通过上述方法，我们成功地解决了Yii2 GridView生成冗余URL参数的问题。这种解决方案的优势在于：
避免修改核心文件： 不触碰 vendor 目录下的任何文件，确保Yii2框架升级的顺畅。易于维护： 所有自定义逻辑集中在项目可控的 web/js 目录下，方便管理和调试。提升用户体验： 简洁的URL更具可读性和分享性。
此方法提供了一种优雅且实用的方式来优化Yii2应用程序的URL结构，特别适用于那些需要频繁使用GridView筛选功能的场景。
以上就是优化Yii2 GridView URL：自动移除未使用的查询参数的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1331238.html
微信扫一扫 
支付宝扫一扫 
