Jqgrid搜索自动填充,在字段'过滤器'上选择设置值

时间:2014-05-05 12:43:33

标签: jquery jqgrid autocomplete

我在搜索对话框中使用JQgrid,其中一个字段是自动完成,
它工作正常,但在服务器端,该字段没有任何价值。 你可以在这里看到:
request [“filters”] = {“groupOp”:“AND”,“rules”:[{“field”:“Name”,“op”:“eq”,“data”:“”}}}

这是我的网格

  $("#myGrid").jqGrid({
    url: 'Handler.ashx',
    datatype: 'json',
    height: 250,
    direction: 'rtl',
    colNames: ['b', 'd', 'e', 'c', 'a'],
    colModel: [
                     { name: 'Semel', index: 'Semel', width: 80, sortable: true, formatter: semelFormatter },
                     { name: 'Name', width: 400, sortable: true ,searchoptions: {
               dataInit: function (elem) {
                     JqgridAuto(elem, "tyishuv", "yishuv", "shem", null);  }},
                     { name: 'Num', width: 50, sortable: true, align: "center" },
                     { name: 'date', width: 100, sortable: true },
                     { name: 'dateT', width: 100, sortable: true }

    ],
    rowNum: 200,
    postData: {       },
    rowList: [10, 20, 30, 200],
    pager: '#myGridPager',
    viewrecords: false,
    sortorder: 'asc'       
});
$("#myGrid").jqGrid('navGrid', '#myGridPager', { edit: false, add: false, del: false });

以下是自动完成功能:

var JqgridAuto = function (elem, tableName, nameCodeFilde, dspl, code, localValue, fildeFilter) {
var funcName = "FetchList";
if (code == undefined)
    code = "Semel";
if (localValue == undefined)
    localValue = '';
if (fildeFilter == undefined)
    fildeFilter = '';

var autocompleteSource = function (request, response) {
    $.ajax({
        url: "AutoComplete.asmx/" + funcName,
        dataType: "json",
        type: "POST",
        async: false,
        data: "{ 'Text':  '" + escape(request.term) + "','Code':'" + code + "','Dspl':'" + dspl + "','NumRecordes':'8','TableName':'" + tableName + "','fltr':'','Lfld':'" + localValue + "','Mfld':'" + fildeFilter + "','Desc':''}",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
                if (!data.d.length) $(elem).val("");
            if (data.d.length == 1 && /^\d+$/.test(request.term)) {
                $(elem).val(data.d[0].Text);
                $("#" + nameCodeFilde).val(data.d[0].Semel);
                              }
            else {
                response($.map(data.d, function (item) {
                    return {
                        value: item.Semel,
                        label: item.Shem
                    };
                }
                ));
            }//else
        },
        error: function (res, status) {
            alert(res.status + " : " + res.statusText + ". Status: " + status);
        }
    }); //END AJAX
};
$(elem).autocomplete({
    source: autocompleteSource,
    position: { collision: "flip" },
    minLength: 1,
    select: function (event, ui) {
        $(elem).val(ui.item.label);
        $("#" + nameCodeFilde).val(ui.item.value);
    } 
}); //END AUOTOCOMPLETE
$('.ui-autocomplete').css('zIndex', 1000); // if autocomplete has misalignment so we are manually setting it 
if (elem.value != "0" && elem.value != '' && /^\d+$/.test(elem.value))
    $(elem).autocomplete('search', elem.value);

};

1 个答案:

答案 0 :(得分:1)

我认为您的主要问题可以通过在自动完成设置从服务器返回的值后直接在"change"上触发elem事件来解决。所以你应该添加一行

$(elem).trigger("change");

select回调中。有关代码示例,请参阅the answer

另外我应该提一下,你用于自动完成的代码,似乎太复杂而且不完全正确。例如,行

data: "{ 'Text':  '" + escape(request.term) + "','Code':'" + code + "','Dspl':'" +
    dspl + "','NumRecordes':'8','TableName':'" + tableName + "','fltr':'','Lfld':'" +
    localValue + "','Mfld':'" + fildeFilter + "','Desc':''}"

包含手动将对象转换为JSON字符串。此外,您对字符串使用'而不是"。这是错的。只有旧的Microsoft ASMX Web服务器实现才能容忍这一点。我建议您将对象改为data,然后拨打JSON.stringify

data: JSON.stringify({
    Text: request.term,
    Code: code,
    Dspl: dspl,
    NumRecordes: "8",
    TableName: tableName,
    fltr: "",
    Lfld: localValue,
    Mfld: fildeFilter,
    Desc: ""
})

此外,您还应在response回调中添加error回调调用。请参阅以下

  

提供自定义源回调来处理时非常重要   请求期间的错误。您必须始终调用响应回调   即使你遇到错误。

在jQuery UI自动完成的the documentation中。