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

我有一个JQGrid，并且在行内联编辑时打开该行时显示一个下拉列。此下拉菜单显示数据库中已有的可用列表项。当我从clientArray保存网格时，更新的数据保存在数据库中。如何使用JQgrid中的添加项目的选项显示下拉列表

现在，我需要一个选项来在此下拉列表中添加一个新项目，并在数据库中添加该项目，以便下次用户查看下拉菜单时可以使用新项目。

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

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

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,

来源

2016-09-23 Rahul

如果你希望用户能够将数据输入选择，那么你想要的是一个组合框或DataList控件的输入：

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/

UPDATE

参见如何将数据列表添加到网格这个小提琴： https://jsfiddle.net/y3llowjack3t/a385ayau/1/

来源

2016-09-30 22:56:45 Blindsyde

感谢Blindsyde的回应，我试着用你的解决方案。我对JQGrid非常陌生，但据我所知，由于我已经声明了_EditType：select_，所以默认情况下JqGrid会创建一个选择框并且不允许创建一个数据列表。 – Rahul

@Rahul我建立在与之前一起工作的小提琴上以展示如何添加数据列表。请参阅更新部分下的小提琴。 – Blindsyde

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

回答

相关问题