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 app。

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

Answer 1

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

问题：

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

2）有很多方法可以在jqGrid中实现下拉。主要的替代方案是使用searchoptions的value或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 Autocomplete。

我认为jQuery UI Autocomplete在某些情况下可能是选择的好选择，特别是如果可能的选项数量非常大。

更新：有很多方法可以使搜索不区分大小写。如果使用本地搜索（使用datatype其他"json"或xml"或使用loadonce: true），则应使用{{1} jqGrid的选项。如果服务器端搜索，您应该在服务器端使搜索不敏感。我在过滤过程中只使用了COLLATE。例如，而不是像

这样的结构
ignoreCase: true

我用

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

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

使用始终 WHERE Name COLLATE SQL_Latin1_General_CP1_CI_AS LIKE ('%' + @s + '%')选项。有关详细信息，请参阅the answer。

始终以gridview: true形式指定寻呼机，而不是pager: "#jqgPagerFileInfoList"形式。

不要使用pager: $("#jqgPagerFileInfoList")
等不存在的选项
我建议您使用refresh: true选项强制将服务器返回的数据解释为文本而不是HTML片段。如果没有选项，您可能会遇到显示autoencode: true，<等
的短信的问题
我建议您检查&属性的默认值（请参阅the documentation）。您会看到可以从代码中删除colModel，align: 'left'，sorttype: 'text'等。

您应该将允许的值用于search: true的属性。例如，colModel不正确，将被解释为默认值width: '100%'。

您用于width: 150的所有值都与jsonmap属性的值相同。所以你可以删除这些值。

我建议您删除隐藏列name。 jqGrid使用name: 'Id'的{{1}}属性表示网格行。您在id内使用<tr>。您可以在repeatitems: false中添加属性jsonReader，以指定jqGrid应使用rowid的行数据中的项的jsonReader属性。

jqGrid筛选器工具栏和日期和选择筛选器

1 个答案: