jqgrid添加后如何清除添加表单中的自动完成框内容

Question

jqGrid 添加表单包含使用以下代码的自动完成框。 如果新行添加到jqgrid，自动完成字段不会被清除，仍然显示添加的行内容。 简单的文本框列已正确清除。 如何清除自动完成框？

var grid = $("#grid");
grid.jqGrid({
    url: 'GetData',
    datatype: "json",
    mtype: 'POST',
    scroll: 1,
    multiselect: true,
    multiboxonly: true,
    scrollingRows : true,
    autoencode: true,
    prmNames:  {id:"_rowid", oper: "_oper" }, 
    colModel: [{"label":"Artikkel","name":"Toode","edittype":"custom","editoptions":{"custom_element":function(value, options) {
return combobox_element(value, options,'54','Toode','RidG','ArtikkelDokumendiReal')}
,"custom_value":combobox_value
},"editable":true},
],
    gridview: true,
    toppager: true,
    editurl: 'Edit',
    rownumbers: true,
});

grid.navGrid("#grid_toppager", { refreshstate: 'current' },
    {},
    { url: 'AddDetail',
    editData: { _dokdata: FormData },
    savekey: [true, 13],
    recreateForm: true,
    closeOnEscape: true,
    // todo: this does not clear autocomplete boxes:
    clearAfterAdd: true,
    addedrow: 'last',
    reloadAfterSubmit: false,
    afterSubmit: function (response) { return [true, '', response.responseText] },
});

function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr;
    if (options.id === options.name)
    // form 
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content ui-corner-all" style="vertical-align:top" size="' +
                options.size + '" value="' + value + '"/>' +
           '<button ' +
           ' style="height:21px;width:21px;" tabindex="-1" /></div>';
    else
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content " style="height:17px;vertical-align:top;width:' +
                width + 'px" value="' + value + '"/>' +
           '<button ' +
           ' style="height:21px;width:21px;" tabindex="-1" /></div>';
    var newel = $(elemStr)[0];
    setTimeout(function () {
        input_autocomplete(newel, colName, entity, andmetp, validate);
    }, 50);
    return newel;
}

function input_autocomplete(newel, colName, entity, andmetp, fvalidate) {
    var input = $("input", newel);
    input.autocomplete({
        source: 'Grid/GetLookupList'
    });
}

function combobox_value(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).find("input").val();
    } else if (operation === 'set') {
        $('input', elem).val(value);
    }
}

Answer 1

在我看来，问题的存在是因为您使用 自定义编辑控件< /a> (edittype:"custom"、custom_element 和 custom_value。您要编辑的 元素创造目前没有 id。您应该遵循 jqGrid id 转换并创建 元素，其 id 等于 options.id：

function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr, newel;
    if (options.id === options.name) {
        // form 
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content ui-corner-all"'+
           ' style="vertical-align:top"' +
           ' id="' + options.id + '"' +
           ' size="' + options.size + '" value="' + value + '"/>' +
           '<button style="height:21px;width:21px;" tabindex="-1" /></div>';
    } else {
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content "' +
           ' style="height:17px;vertical-align:top;width:' +
           width + 'px"'+
           ' id="' + options.id + '_x"' +
           ' value="' + value + '"/>' +
           '<button ' +
           ' style="height:21px;width:21px;" tabindex="-1" /></div>';
    }
    newel = $(elemStr)[0];
    setTimeout(function () {
        input_autocomplete(newel, colName, entity, andmetp, validate);
    }, 50);
    return newel;
}

更新：我更正了上面使用 options.id 作为 id 的代码。输入>到值options.id + "_x" 的问题是 options.id 稍后会被 jqGrid 分配给

元素。将表示为 newel。 jQuery UI Autocomplete 要求将连接到的 元素具有唯一的 id，因此我们可以选择任何其他 id作为options.id 没有 id 重复项。