如何使用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中的添加項目的選項顯示下拉列表

回答

相關問題