jqGrid 过滤器工具栏和日期和选择过滤器

Question

我有一个 jqGrid：

$('#jqgFileInfoList').jqGrid({
    url: '@Url.Action("GetFiles", "File")',
    datatype: 'json',
    mtype: 'POST',
    colNames: ['Id', 'Name', 'Interface', 'Amount', 'Type', 'Created', 'Status'],
    colModel: [
        { jsonmap: 'Id', name: 'Id', formatter: 'integer', align: 'right', hidden: true },
        { jsonmap: 'Name', name: 'Name', align: 'right', hidden: true },
        { jsonmap: 'InterfaceName', name: 'InterfaceName', align: 'left', width: '100%', sorttype: 'text', frozen: true, search: true },
        { jsonmap: 'Amount', name: 'Amount', formatter: 'currency', align: 'right', width: '100%', sorttype: 'number', search: true },
        { jsonmap: 'Type', name: 'Type', align: 'right', width: '100%', sorttype: 'text', search: true },
        { jsonmap: 'RunDate', name: 'RunDate', formatter: 'date', align: 'right', width: '100%', sorttype: 'date', search: true },
        { jsonmap: 'Status', name: 'Status', align: 'right', width: '100%', sorttype: 'text', formatter: formatStatus, search: true }
    ],
    sortname: 'RunDate',
    sortorder: 'desc',
    pager: $('#jqgPagerFileInfoList'),
    rowNum: 5,
    viewrecords: true,
    height: '100%',
    autowidth: true,
    refresh: true,
    ignoreCase: true,
    jsonReader: {
        repeatitems: false,
        root: "rows"
    },
    altRows: true,
    altclass: 'jqGridAltRow',
    loadComplete: function () {
        $("tr.jqgrow:odd").addClass('jqGridAltRow');
    }
});

$('#jqgFileInfoList').jqGrid('filterToolbar', { searchOnEnter: false, enableClear: true, stringResult: true });

过滤工作正常，除了我要修改的几列。

我想以某种方式过滤范围的 Created/RunDate 列。选择一个日期没有用。

我想使用下拉菜单的接口、类型和状态列。最好的方法是什么？

我发现 jqGrid 文档很难理解，有很多选择。我花了一个小时才弄清楚我需要stringResult: true 才能将我的过滤器选项放入控制器中的GridSettings.Where 属性中。

如果重要的话，它是一个 .Net 4.0、MVC 应用程序。

编辑：额外问题：如何使其不区分大小写。

Answer 1

我同意the official documentation只能更多地作为参考，而不是作为开始使用它的开发人员的介绍，尤其是对于.NET开发人员。

对于您的问题：

1) 没有简单的方法来实现按日期范围搜索。可以制作一些技巧，例如 here 描述的技巧。高级搜索的filterToolbar 或onSearch 回调的beforeSearch 回调的使用允许在应用搜索过滤器之前“预处理”搜索过滤器，但所有这些都非常棘手。如果使用服务器端排序，您可以直接在服务器端实现。

2) jqGrid中实现下拉的方式有很多种。主要的替代方法是使用value 或searchoptions 的dataUrl 属性。最佳选择取决于您的具体要求。

value 的使用非常实用，如果该列有一些更静态的值作为动态值。例如，如果您在网格中使用formatter: "checkbox" 将布尔数据显示为复选框，您希望确保在该列的过滤器中使用下拉菜单。在使用如下设置的情况下

stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":All;true:Yes;false:No" }

会很实用。顺便说一句，你可以在对象形式中使用value

value: {"": "All", true:"Yes", false: "No"}

在其他情况下，如果您有少量值，您可以使用value 在搜索过滤器中实现下拉菜单。

dataUrl 的用法应该在您从数据库中动态获取的值列表中使用。我可以联系你the answer，它解释了相应实现的主要思想。

The answer 展示了简单的纯 JavaScript 代码，演示了如何仅在客户端实现选择和自动完成。在服务器端分页和过滤的情况下，应该选择另一种实现方式。 The answer 展示了如何在 ASP.NET MVC 解决方案中实现 jQuery UI 自动完成。

我认为 jQuery UI 自动完成在某些情况下可能是一个不错的选择，尤其是在可能的选项数量非常多的情况下。

更新：有很多方法可以使搜索不区分大小写。如果使用 local 搜索（使用 datatype 其他作为 "json" 或 xml" 或使用 loadonce: true），应该只使用 jqGrid 的 ignoreCase: true 选项。在服务器端搜索的情况下，您应该使搜索不敏感在服务器端。我个人在过滤过程中只使用COLLATE。例如，而不是像

这样的结构

WHERE Name LIKE ('%' + @s + '%')

我用

WHERE Name COLLATE SQL_Latin1_General_CP1_CI_AS LIKE ('%' + @s + '%')

关于您发布的代码的另一个小评论：

• 使用总是 gridview: true 选项。详情请见the answer。
• 始终以pager: "#jqgPagerFileInfoList" 的形式而不是pager: $("#jqgPagerFileInfoList") 的形式指定寻呼机。
• 不要使用不存在的选项，例如refresh: true
• 我建议您使用autoencode: true 选项强制将从服务器返回的数据解释为文本而不是HTML 片段。如果没有这些选项，您可能无法显示具有<、& 等的文本。
• 我建议您检查colModel 属性的默认值（请参阅the documentation）。您会看到您可以从代码中删除 align: 'left'、sorttype: 'text'、search: true 等。
• 您应该为colModel 的属性使用允许的值。例如width: '100%' 不正确，将被解释为默认值width: 150。
• 您用于jsonmap 的所有值都与name 属性的值相同。因此，您可以删除这些值。
• 我建议您删除隐藏列name: 'Id'。 jqGrid 使用<tr> 的id 属性表示网格的行。您在jsonReader 中使用repeatitems: false。您可以在jsonReader 中添加属性id: "Id" 以指定jqGrid 应使用行数据中项目的"Id" 属性作为rowid。