1

我有一个 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 应用程序。

编辑：奖金问题：我如何使它不区分大小写。

4

1 回答 1

3

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

对于您的问题：

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

2）jqGrid中实现下拉的方式有很多种。主要的替代方法是searchoptionsvalue的使用或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如果您从数据库中动态获取的值列表，则应使用 one的用法。我可以回答你解释相应实现的主要思想的答案。

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

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

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

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

我用

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

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

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