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

在我看来，问题依然存在是因为您使用custom edit control（edittype:"custom"，custom_element和custom_value。您创建的<input>元素目前没有ID 。您应该关注jqGrid ID转换并创建<input>元素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的{{1}}到值<input>。问题是jqGrid稍后将options.id + "_x"分配给options.id元素，该元素将表示为<div>。 jQuery UI自动填充功能要求它将连接到的newel元素具有唯一ID，因此我们可以选择任何其他ID作为<input>，以便没有ID重复项。

如何在jqgrid中添加后添加表单中的自动填充框内容

1 个答案: