添加jqgrid后如何清除添加表单中的自动完成框内容 [英] how to clear autocomplete box contents in add form after adding in jqgrid

问题描述

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

jqGrid add forms contains autocomplete boxes using code below. If new row is added to jqgrid, autocomplete fields are not cleared, the still show added row content. Simple textbox columns are cleared properly. How to clear autocomplete boxes also ?

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

推荐答案

在我看来，由于您使用，custom_element和custom_value.您创建的<input>元素目前没有ID .您应该遵循jqGrid id转换并创建具有id等于options.id的<input>元素:

It seems to me that the problem exist because you use custom edit control (edittype:"custom", custom_element and custom_value. The <input> element which you create has currently no id. You should follow jqGrid id conversion and create the <input> element having id equal to 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作为<input>的id纠正为值options.id + "_x". jcGrid稍后将options.id分配给将表示为newel的<div>元素的问题. jQuery UI Autocomplete要求将要连接到的<input>元素具有唯一的ID，因此我们可以选择其他任何ID作为options.id，以确保没有ID重复.

UPDATED: I corrected the code above from the usage of options.id as the id of the <input> to the value options.id + "_x". The problem that the options.id will be assigned by jqGrid later to the <div> element which will be represented as newel. jQuery UI Autocomplete required that the <input> element, to which it will be connected, has an unique id so we can choose any other id as options.id to have no id duplicates.

这篇关于添加jqgrid后如何清除添加表单中的自动完成框内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！