jqGrid DatePicker过滤而不点击Enter键 [英] jqGrid DatePicker filtering without hitting Enter key

问题描述

我正在构建我的第一个ASP.NET MVC 3应用程序并使用jqGrid.我的其中一个列"Flavor Created"是日期列，我想使用DatePicker过滤该列上的网格.当前发生的情况是:用户单击列标题过滤器框，显示日期选择器，然后用户选择年，月并单击一天.选择器离开，并将日期(例如03/28/2009)留在文本框中.为了使过滤器真正起作用，我必须单击该框，然后按Enter键，这对于用户来说有点烦人.

I'm building my first ASP.NET MVC 3 app and using jqGrid. One of my columns, "Flavor Created", is a date column and I'd like to filter the grid on that column using the DatePicker. Here's what currently happens: The user clicks on the column header filter box, the date picker is displayed and then the user chooses the year, month and clicks a day. The picker goes away and leaves the date, say, 03/28/2009, in the text box. To actually get the filter to work, I have to click into that box and hit the Enter key, which is a bit annoying for the user.

有没有一种方法可以让过滤器在用户点击当天自动触发?

Is there a way to have the filter automatically fire when the user clicks that day?

(顺便说一句，我不确定'Done'按钮的用途是什么，因为每次单击一天时选择器都会消失.也许这是我所缺少的设置.)

还有其他人需要此功能并解决吗?

Anyone else needed this functionality and solved it?

我试图做这样的事情:

dataInit: function (elem) {
  $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true,
    onSelect: function (dateText, inst) {
       $("#icecreamgrid")[0].trigger("reloadGrid");
    }
  })
}

正如我在某个网站上看到某人的建议那样，但这似乎不起作用.

as I saw someone on some website suggest, but that didn't seem to work.

推荐答案

您可以尝试

dataInit: function (elem) {
    $(elem).datepicker({
        changeYear: true,
        changeMonth: true,
        showButtonPanel: true,
        onSelect: function() {
            if (this.id.substr(0, 3) === "gs_") {
                // in case of searching toolbar
                setTimeout(function(){
                    myGrid[0].triggerToolbar();
                }, 50);
            } else {
                // refresh the filter in case of
                // searching dialog
                $(this).trigger("change");
            }
        }    
    });
}

更新:从版本4.3.3开始，jqGrid将网格的DOM初始化为dataInit的this.因此，不需要在上面的代码中使用myGrid变量.除此以外，还可以使用:

UPDATED: Starting with the version 4.3.3 jqGrid initialize the DOM of grid as this of dataInit. Thus one don't need to use myGrid variable in the above code. Instead of that one can use:

dataInit: function (elem) {
    var self = this; // save the reference to the grid
    $(elem).datepicker({
        changeYear: true,
        changeMonth: true,
        showButtonPanel: true,
        onSelect: function() {
            if (this.id.substr(0, 3) === "gs_") {
                // in case of searching toolbar
                setTimeout(function () {
                    self.triggerToolbar();
                }, 50);
            } else {
                // refresh the filter in case of
                // searching dialog
                $(this).trigger("change");
            }
        }    
    });
}

免费的jqGrid调用带有dataInit的第二个options参数，该参数包含其他信息，例如mode属性.如果在过滤器工具栏内部调用，则mode属性的值是"filter"(对于搜索对话框，则为"search").因此，可以使用以下代码

Free jqGrid calls with the second options parameter of dataInit, which contains additional information, like the mode property. The value of mode property is "filter" in case of calling inside of the filter toolbar (and "search" in case of searching dialog). Thus one can use the following code

dataInit: function (elem, options) {
    var self = this; // save the reference to the grid
    $(elem).datepicker({
        changeYear: true,
        changeMonth: true,
        showButtonPanel: true,
        onSelect: function() {
            if (options.mode === "filter") {
                // in case of searching toolbar
                setTimeout(function () {
                    self.triggerToolbar();
                }, 0);
            } else {
                // refresh the filter in case of
                // searching dialog
                $(this).trigger("change");
            }
        }    
    });
}

这篇关于jqGrid DatePicker过滤而不点击Enter键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！