javascript - jqGrid 中搜索过滤器(范围)的实现

Question

我正在使用 jqgrid 中的搜索对话框。我想要过滤器的列，我只需要将搜索属性设置为 true 即可。

像这样::

{name:'Date',search = true}

{name:'Date 1',search : true}

$("#grid1").jqGrid('navGrid','#pager1', 
{edit:false, 
add:false, 
del:false, 
search:true, 
refresh: true},{}, {}, {}, {multipleSearch: true,closeAfterSearch: true,groupOps: [ { op: "AND", text: "AND" }]} ); 

这样它就会出现在搜索对话框中。

我们可以在JQGRID的搜索对话框中只用列名而不是选择列的下拉列表吗？

最新图片:

这是我的代码::

我尝试使用您提供的两个代码片段进行以下更改:

$.extend($.jgrid.search, {
    multipleSearch: true,
    closeAfterSearch: true,
    groupOps: [ { op: "AND", text: "AND" }],
    afterRedraw: function (p) {
        var $form = $(this);
        $form.find("select.opsel,input.add-rule,input.delete-rule,td.columns>select").hide();
        $form.find("td.operators>select").prop("disabled", true);
        $form.find("td.columns").append("<span>Due Date:<span>");
        setTimeout(function () {
           // set focus in the first input field
           $form.find('input[type="text"]:first').focus();
        }, 100);
    }
});

$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, searchfunc: function (pSearch) {
    var $this = $(this);
    $this.jqGrid("setGridParam", {postData: {
        filters: {
            groupOp: "AND",
            rules: [
                { field: "dueDt", op: "le", "data": "" },
                { field: "dueDt", op: "ge", "data": "" }
            ]
        }
    }});
    $this.jqGrid("searchGrid", pSearch);
}});

发布数据为

postData: {}

Answer 1

如果我正确理解你想要的问题

1. 隐藏搜索对话框的一些控件
2. 在打开搜索对话框之前设置过滤规则。确切地说，您需要对某些列设置具有两个规则的“AND”运算:“大于或等于”和“小于或等于”。

我可以想象该场景的多种实现。例如，您可以将 navGrid 与 search: false 选项一起使用，并使用 navButtonAdd 添加看起来与“搜索”按钮完全相同的自定义按钮。或者，您可以使用 navGrid 的 searchfunc 参数将 postData.filters 重置为调用之前您需要的过滤器搜索网格。两者的实现将非常接近。

The demo演示了第二种方法。我通过扩展 $.jgrid.search 来设置“搜索”对话框的参数，以减少 navgrid 的许多空 ({}) 参数的使用:

$.extend($.jgrid.search, {
    multipleSearch: true,
    closeAfterSearch: true,
    groupOps: [ { op: "AND", text: "AND" }],
    afterRedraw: function (p) {
        var $form = $(this);
        $form.find("select.opsel,input.add-rule,input.delete-rule,td.columns>select").hide();
        $form.find("td.operators>select").prop("disabled", true);
        $form.find("td.columns").append("<span>Due Date:<span>");
        setTimeout(function () {
           // set focus in the first input field
           $form.find('input[type="text"]:first').focus();
        }, 100);
    }
});

在 afterRedraw 内部，我另外禁用了选择操作:

调用navGrid的代码如下:

$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, searchfunc: function (pSearch) {
    var $this = $(this);
    $this.jqGrid("setGridParam", {postData: {
        filters: {
            groupOp: "AND",
            rules: [
                { field: "invdate2", op: "le", "data": "" },
                { field: "invdate1", op: "ge", "data": "" }
            ]
        }
    }});
    $this.jqGrid("searchGrid", pSearch);
}});