在jqGrid中实现搜索过滤器(范围)

时间:2014-03-18 09:16:14

标签: javascript jquery jqgrid

我在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的搜索对话框中,我们可以只使用列名而不是选择下拉列吗?

Modified Image

最新图片: Image 2

这是我的代码::

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

$.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: {}

1 个答案:

答案 0 :(得分:1)

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

  1. 隐藏搜索对话框的一些控件
  2. 在之前设置过滤规则将打开搜索对话框。确切地说,您需要使用两个规则设置AND操作:“更大或相等”和“更少或相等”某些列。
  3. 我可以想象该场景的多个实现。例如,您可以将navGridsearch: false选项一起使用,并使用navButtonAdd添加与“搜索”按钮完全相同的自定义按钮。或者,您可以使用searchfunc的{​​{1}}参数将navGrid重置为调用postData.filters之前所需的过滤器。两者的实施都非常接近。

    The demo演示了第二种方法。我通过花费searchGrid来设置搜索对话框的参数,以减少$.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); } }); 内部我另外禁用了操作选择:

    enter image description here

    调用afterRedraw的代码如下:

    navGrid