如何使用在 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

如果您希望用户能够在选择中输入数据，那么您需要的是组合框或带有数据列表的输入：

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>';

如果这对您不起作用，那么我建议您在 Google 上搜索 jquery 组合框插件，或者查看 jquery 自动完成功能是否适合您：

https://jqueryui.com/autocomplete/

更新

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