Question

我有一个JQGrid，当打开行进行内联编辑时，我在列中显示一个Drop down。此下拉列表显示数据库中已有的列表项。当我从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>';

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

https://jqueryui.com/autocomplete/

<强>更新

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

如何使用JQgrid中的添加项目选项显示下拉列表

1 个答案: