jqGrid的过滤器工具栏和日期，并选择过滤器 [英] jqGrid Filter Toolbar and Date and Select filters

问题描述

我有一个jqGrid的：

I have a 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 });

过滤工作，除了一对夫妇列我想修改。

Filtering is working, except for a couple columns I want to modify.

在创建/ RunDate专栏中，我想以某种方式过滤的范围。挑选一个日期是没有用的。

The Created/RunDate column I would like to filter a range somehow. Picking a single date is not useful.

在接口方面，类型和状态栏，我想使用下拉菜单。什么是做到这一点的最好方法是什么？

The Interface, Type and Status columns I would like to use drop downs. What's the best way to do this?

我觉得jqGrid的文档非常难走，刚好有这么多的选择。我花了一个小时才弄清楚，我需要 stringResult：真正的来得到我的过滤选项到 GridSettings.Where 物业在控制器中。

I find the jqGrid documentation VERY difficult to follow, there are just so many options. It took me an hour to figure out that I needed stringResult: true to get my filter options into the GridSettings.Where property in the controller.

如果它很重要，这是一个.NET 4.0，MVC应用程序。

And if it matters, it's a .Net 4.0, MVC app.

的 修改的 奖金问题：我怎么让它不区分大小写

EDIT: Bonus Question: How do I make it case insensitive.

推荐答案

我同意的官方文档只能用更多的参考，而不是引进为开发谁开始使用它，尤其不适合.NET开发人员。

I agree that the official documentation can be used only more as reference and not as the introduction for developer who start to use it, especially not for .NET developer.

要你的问题：

1），有落实的日期范围搜索没有简单的方法。人们可以做一些小把戏，比如招描述这里。 filterToolbar 的 beforeSearch 回调或 onSearch 回调的用法高级搜索允许pre-进程搜索过滤器将被应用之前，但都在一起是非常棘手的。在使用服务器端的情况下，排序可以实现直接在服务器端一样的。

1) There are no simple way to implement searching by range of dates. One could make some tricks like the trick described here. The usage of beforeSearch callback of filterToolbar or onSearch callback of advanced searching allows to "pre-process" searching filter before it will be applied, but all together is very tricky. In case of usage server side sorting you can implement the same on the server side directly.

2）要实现jqGrid的下拉菜单许多方面。主要的替代品值或 dataUrl 的 searchoptions 。最好的选择取决于您的具体要求。

2) There are many ways to implement drop downs in jqGrid. The main alternatives are the usage of value or dataUrl properties of searchoptions. The best choice depend on your exact requirements.

值的使用是非常实用的，如果列有一些小的一套是动态比较静态的价值。例如，如果你使用格式复选框，在网格中显示布尔数据为复选框你想确保使用下拉菜单中的过滤器的列。在这种情况下设置如下图所示的使用

The usage of value is very practical if the column have some small set of values which are more static as dynamic. For example if you use formatter: "checkbox" in the grid to display boolean data as checkboxes you would like sure to use drop downs in the filter for the column. In the case the usage of settings like below

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

将非常实用。顺便说一句，你可以在对象表单中使用值

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

在其他情况下，如果你有小数量的值可以使用值来实现搜索过滤器的下拉列表中。

In other cases if you have small number of values you can use value to implement dropdowns in the searching filter.

dataUrl 的用法，如果值的列表中，您从数据库中动态获取，应该使用。我可以解决你答案这也解释了相应的实施的主要思想。

The usage of dataUrl one should use if the list of the values you get dynamically from the database. I can address you to the answer which explains the main idea of the corresponding implementation.

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

The answer shows simple pure JavaScript code which demonstrate how one can implements selects and autocomplete on the client side only. In case of server side paging and filtering one should choose another implementation way. The answer shows how one can implement jQuery UI Autocomplete in ASP.NET MVC solution.

我觉得jQuery UI的自动完成功能可以很好的替代选择在某些情况下，特别是如果可能的选项的数目是非常大的。

I think that jQuery UI Autocomplete could be good alternative to select in some cases, especially if the number of possible options is very large.

更新时间：：有许多方法可以使搜索不区分大小写。在使用的本地的搜索（使用数据类型等为JSON或<$的情况下， C $ C> XML或 loadonce的使用：真正的）应该只使用 IGNORECASE：真正的的jqGrid的选项在的服务器端的搜索，你应该在服务器端搜索不区分大小写的情况的我用个人刚刚的过滤中COLLATE 。例如，而不是结构，如

UPDATED: There are many ways to make searching case insensitive. In case of usage local searching (usage datatype other as "json" or xml" or usage of loadonce: true) one should just use ignoreCase: true option of jqGrid. In case of server side searching you should make searching insensitive on the server side. I use personally just COLLATE during filtering. For example instead of constructs like

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

我用

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

有关code，你一发布更多的小备注：

One more small remarks about the code which you posted:

• 使用的总是 GridView控件：真正的选项。请参见答案了解更多详情。


• 始终指定寻呼机形式呼叫器：#jqgPagerFileInfoList，而不是形式寻呼机：$（＃jqgPagerFileInfoList）。


• 不要使用类似不存在的选项刷新：真正的


• 我建议你使用 AUTOEN code：真正的选项强制间preT从服务器作为文本返回，而不是HTML片段中的数据。如果没有选择，你可能有问题，显示具有textes ＆LT; ，＆放大器; 等


• 我建议你检查 colModel 属性的默认值（见的文档）。你会看到，你可以从你的code删除对齐：'左'， sorttype：文本 ，搜索：真正的等


• 您应该使用允许 colModel 属性的山谷。例如宽度：'100％'是不正确的，将是PTED为默认值间$ P $ 宽度：150


• 您使用 jsonmap 相同名称属性的值的所有值。所以，你可以删除该值。


• 我建议你删除隐藏的列名称：ID。 ＆LT的使用的jqGrid ID 属性; TR＆GT; 从而重新网格present行。您可以使用 repeatitems：假 jsonReader 内部。您可以在 jsonReader 添加属性 ID：ID来指定的jqGrid应该使用 ID从的rowid行数据项的属性。

• use always gridview: true option. See the answer for more details.
• specify the pager always in the form pager: "#jqgPagerFileInfoList" instead of the form pager: $("#jqgPagerFileInfoList").
• don't use non-existing options like refresh: true
• I recommend you to use autoencode: true option to force interpret the data returned from the server as text and not as HTML fragments. Without the options you could have problems to display textes having <, & etc.
• I recommend you examine default values of colModel properties (see the documentation). you will see that you can remove from your code align: 'left', sorttype: 'text', search: true etc.
• You should use permitted vales for properties of colModel. For example width: '100%' is incorrect and will be interpreted as default value width: 150.
• all values which you use for jsonmap are the same as the value of name property. So you can remove the values.
• I recommend you remove hidden column name: 'Id'. jqGrid use id attribute of <tr> which represent rows of grid. You use repeatitems: false inside of jsonReader. You can add in jsonReader the property id: "Id" to specify that jqGrid should use "Id" property of items from the row data for rowids.

这篇关于jqGrid的过滤器工具栏和日期，并选择过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！