jqgrid - jqGrid DatePicker过滤而不点击Enter键

Question

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

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

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

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

我试图做这样的事情:

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

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

Answer 1

您可以尝试

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将grid的DOM初始化为 this的 dataInit。因此，不需要在上面的代码中使用 myGrid变量。除此以外，还可以使用:

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");
            }
        }    
    });
}

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

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");
            }
        }    
    });
}