jqGrid DatePicker 未在复杂搜索对话框中初始化答案

【问题标题】：jqGrid DatePicker isn't being Initialised in Complex Search DialogjqGrid DatePicker 未在复杂搜索对话框中初始化
【发布时间】：2012-02-24 19:54:40
【问题描述】：

我有一个带有“multipleSearch=true”和“multipleGroup=true”的 jqGrid 来允许复杂的搜索。

我为列设置了“stype”（在我的例子中，这包括“date”、“text”、“integer”和“currency”）。

我还分别为“日期”和“文本”列的 DatePicker 和 AutoComplete 插件提供了“dataInit”函数。

当我打开搜索对话框时，会调用自动完成“dataInit”函数，但不会调用 DatePicker“dataInit”函数。

这似乎是因为“dataInit”函数在创建新过滤器时触发，并且基于第一列的“stype”。

（我应该怀疑当用户从搜索对话框的下拉列表中选择一列时触发。）

当用户想要搜索“日期”字段并为其他字段“类型”禁用它时，有没有办法显示 DatePicker？

我已经在下面包含了相关的代码sn-ps：

var DatePickerCfg = { id: 'DatePicker',dateFormat: 'dd/mm/yy',minDate: new Date(1990,0,1),maxDate: new Date(2099,12,31),showOn: 'focus' };
var AutoCompleteCfg = { id: 'AutoComplete',source: '' };



var formatoptions = {};
var searchoptions = {};


else if (Field['Type'] == '[datetime]')
{
 stype = 'date';
 formatoptions = {srcformat: 'Y-m-dTH:i:s', newformat: 'd/m/Y g:i:s A'};
 searchoptions = {sopt: ['eq','ne','lt','le','gt','ge'], dataInit: function(el) {setTimeout(function() {jQuery(el).datepicker(DatePickerCfg);}, 200);}};
}
else {searchoptions = {sopt: ['eq','ne','lt','le','gt','ge','bw','bn','ew','en','cn','nc'], dataInit:function(el) {setTimeout(function() {jQuery(el).autocomplete(AutoCompleteCfg);},200);}};}

colModel.push({name:Field['Field'], index:Field['Field'], align:Field['Align'], sortable:true, stype:stype, formatter:stype, formatoptions:formatoptions, searchoptions:searchoptions});

【问题讨论】：

我在 Trirand 网站上的各种 C# 和 VB 示例中注意到他们已经设法让这个工作......当然，他们的代码中没有任何线索，因为他们正在使用他们的专有服务器端库。请参阅下面的链接：trirand.net/a...id/searchdialogmultiple 在他们的“SetUpSearchDialogMultipleGrid”函数中，他们明确配置搜索对话框以使用 DataPicker，但它全部在 C# 和 VB.Net 中，没有详细说明他们真正在做什么的实际代码。

标签： jqgrid jquery-ui-datepicker

【解决方案1】：

我不必使用搜索对话框，但在使用内联编辑时遇到了类似的问题。问题是 DatePicker 需要知道它要作用的 DOM 元素。 dataInit 提前触发。我确定这就是您使用 setTimeout 函数的原因，文档指出该函数可以用作替代方法 - 奇怪的是它不起作用。

我通过以下方式解决了这个问题：

colModel:[ {classes:'applyDatePicker',edittype:"checkbox"

当行进入editMode时有一个回调函数

function onEditRow(rowId) { 
    var dp = jQuery('.applyDatePicker>input[type="text"]');
    jQuery(dp).each(function () {
        jQuery(this).bind('click', function () {
            jQuery(this).datepicker();
            jQuery(this).focus();
        });
    });
}

也许您可以使用类似的方法，但将其应用在 afterShowSearch 回调函数中？

【讨论】：

【解决方案2】：

这是我的错...我将日期列上的 stype 设置为“日期”而不是“文本”。 stype 是指搜索对话框中的输入类型，而不是数据类型。（我通过搜索源代码发现了这一点）

【讨论】：