如何显示下拉列表以及在JQgrid中添加项目的选项

Question

我有一个JQGrid，打开行进行内联编辑时，我在列中显示一个下拉列表。 此下拉列表显示数据库中已经可用的列表项。 当我从clientArray保存网格时，更新的数据将保存在数据库中。

现在，我需要一个选项来在此下拉菜单中添加一个新项目，然后将该项目添加到数据库中，以便当用户下次查看该下拉菜单时，该新项目将可用。

任何人都可以帮助找出是否有任何选项可以进行带输入文本的下拉框，以便在运行时将新项添加到下拉列表中。

以下是我用来显示下拉菜单的示例代码。

mygrid = jQuery("#list").jqGrid({
    url:url,
datatype: "json",
height: 'auto',
width: winW,        
colNames:['id','cusipNo','Account No.','Account Type','Location Memo','Account Coding'],
colModel:[
    {name:'Id',index:'stockRecordId',hidden:true,key: true,search: false},
    {name:'cusipNo',index:'cusipNo',hidden:true},   
    {name:'accountNo',index:'accountNo',sortable:true,search: false, align: 'left',editable: true, width: 90, editrules:{custom: true, custom_func: validateAccountNo }},
    {name:'accountType',index:'accountType',sortable:true,search: false, align: 'center',editable: true, width: 100},
    {name:'locationMemo',index:'locationMemo',sortable:true,search: false, align: 'center',editable: true, width: 110},
    {name:'accountCoding',index:'accountCoding',sortable:true,search: false,  align: 'left',editable: true, width: 370, edittype: 'select',
        editoptions: { dataUrl: accCodingUrl , 
                buildSelect: function (data) {
                    var sel = '<select>';
                    $.each(JSON.parse(data),function(i,accountCoding){
                    sel += '<option value="'+accountCoding.key+'">'+accountCoding.value+'</option>';
                        });
                    return sel + "</select>";
                }
            }
}],
cmTemplate: {editable: true},
multiselect: false,     
paging: true,
loadonce:true,
sortname: 'Id',
rowList: [],
rowNum:-1,
pager: $("#page"),      
viewrecords: false,
pgbuttons: false,
pgtext: null,

Answer 1

如果希望用户能够将数据输入到select中，那么您想要的是组合框或带有数据列表的输入：

https://jsfiddle.net/kzm7jq74/

您选择的生成代码将被重写为：

var sel = '<input type="text" list="accntCodes"/><datalist id="accntCodes">';
            $.each(JSON.parse(data),function(i,accountCoding){
            sel += '<option data-value="'+accountCoding.value+'" value="'+accountCoding.key+'">';
                });
            return sel + '</datalist>';

如果这对您不起作用，那么我建议谷歌搜索jquery combobox插件，或者看看jquery自动完成是否可以为您工作：

https://jqueryui.com/autocomplete/

更新

有关如何将数据列表添加到网格的信息，请参见此小提琴： https : //jsfiddle.net/y3llowjack3t/a385ayau/1/