如何使 url 中的免费 jqgrid 过滤器易于阅读答案

【问题标题】：How to make free jqgrid filter in url human readable如何使 url 中的免费 jqgrid 过滤器易于阅读
【发布时间】：2015-12-07 10:01:08
【问题描述】：

免费 jqgrid 使用 json 格式从服务器读取数据。过滤条件是使用 jqgrid 高级搜索、工具栏搜索或在代码中创建的。

使用GET请求查询字符串filters参数读取

   var urlFilters,
       namedParameters =  window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'),
                        parameters = {},
                        nameAndValue,
   $grid = $("#grid"), i;
                for (i = 0; i < namedParameters.length; i += 1) {
                    nameAndValue = namedParameters[i].split('=');
                    parameters[nameAndValue[0]] = decodeURIComponent(nameAndValue[1]);
                    if (nameAndValue[0] === "filters") {
                        urlFilters= decodeURIComponent(nameAndValue[1]);
                    }
                }
                $grid.jqGrid({
                    postData: { filters: urlFilters }
                    datatype: "json",

这需要传递编码的过滤条件 url，它不是人类可读和可编辑的：

http://localhost//Desktop?filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Baas%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22KLIENT%22%7D%2C%7B%22field%22%3A%22Liigid%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22%22%7D%5D%7D

有时用户需要直接编辑浏览器url来创建新的过滤条件？

如何使 url 可读，以便可以直接编辑？如何强制 jqgrid 以 OData 或其他格式创建高级和工具栏搜索条件，在 url 中传递时不需要使用 % 进行转义？

免费 jqgrid 有 OData 插件。如何从这个插件中提取 OData 搜索过滤器创建并允许 jqgrid 以这种格式序列化搜索条件并将其解析回以显示在高级搜索过滤器中？或者是否可以修改当前的搜索条件，使其不使用" (%22)？

How to force jqgrid to query data using OData in query string和How one could use server side sorting and paging with Azure Mobile Services有相关问题

但我不知道哪种方法最好。

OData 不是必需的。也许对免费的 jqgrid 搜索条件序列化器和反序列化器进行一些简单的更改，使其可以在 URL 中进行人工编辑。但是使用 OData 使 API 更加标准化。

使用了 ASP.NET MVC4 和 jquery。

【问题讨论】：

对不起，但你在问题中混合了两个独立的东西：现有的filters 格式和 OData 的 URL 格式，例如可以针对 OData 插件生成。您应该明白，如果不破坏与以前版本的兼容性，就无法更改现有的过滤器格式。在我看来，您只需要一个简单的工具，它允许您以您（不是简单的用户）可以修改的形式解码 URL，以及另一个可以进行回编码的工具。不是吗？
@Oleg。是的。问题要求两个 javascript 方法/回调：1. 将 jqgrid 过滤器对象序列化为 OData 或类似的 URL 友好字符串 2. 将其转换回 jqgrid 格式以传递给 jqgrid 高级搜索对话框并显示在 jqgrid 搜索工具栏中。
我仍然无法关注你。您是否在后端使用 OData？您写了“有时用户需要直接编辑浏览器 url 来创建新的过滤条件？”这意味着您的服务器部分支持filters参数的标准jqGrid格式，并且您的问题存在只是因为您想将其保存在某处或修改先前创建的filters参数。不是吗？
未使用 OData。后端使用来自答案 stackoverflow.com/questions/10051847/… 的解析器。我试图在浏览器中输入http://mysite/API/Customer?filters=Name cn "bob"，但从反序列化器中得到了无效的 json 字符串异常。如何解决此问题，以便可以在浏览器 URL 中以可读格式指定过滤器？
是否需要生成过滤器Name cn "bob"对应的过滤器？您只需使用{"groupOp":"AND","rules":[{"field":"Name","op":"cn","data":"bob"}]} 或http://mysite/API/Customer?filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Name%22%2C%22op%22%3A%22cn%22%2C%22data%22%3A%22bob%22%7D%5D%7D。你搜索{"groupOp":"AND","rules":[{"field":"Name","op":"cn","data":"bob"}]}字符串的编码方式吗？

标签： json rest jqgrid odata free-jqgrid

【解决方案1】：

我个人使用 Fiddler 非常活跃。它是免费工具，可以从here 下载。 Fiddler 允许捕获完整的 HTTP 流量。它还包括一些工具，可简化典型 HTTP 流量的编码和解码。

启动 Fiddler 后，您可以在 Tool 中选择菜单项“TextWizard”或使用 Ctrl+E。之后，您将获得非常简单的界面，允许您解码/编码 filters 值。例如，您可以在向导顶部插入来自您的问题%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Baas%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22KLIENT%22%7D%2C%7B%22field%22%3A%22Liigid%22%2C%22op%22%3A%22eq%22%2C%22data%22%3A%22%22%7D%5D%7D 的过滤器值，然后选择 URLDecode 作为转换操作。您将立即看到解码结果

您可以复制结果修改它并解码回来。例如过滤器Name cn "bob" 应该写成{"groupOp":"AND","rules":[{"field":"Name","op":"cn","data":"bob"}]}。使用相同的工具并选择 URLEncode 操作，您将得到

因此您可以使用filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Name%22%2C%22op%22%3A%22cn%22%2C%22data%22%3A%22bob%22%7D%5D%7D 作为 URL。

【讨论】：