jqGrid DatePicker 过滤而不按 Enter 键

Question

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

有没有办法让过滤器在用户当天点击时自动触发？

（顺便说一句，我不确定“完成”按钮的用途是什么，因为每当我点击一天时选择器就会消失。也许这是我缺少的设置。） em>

还有其他人需要这个功能并解决了吗？

我试图做这样的事情：

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 将网格的 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");
            }
        }    
    });
}

使用dataInit 的第二个options 参数进行免费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");
            }
        }    
    });
}