jqGrid：添加記錄對話框中的下拉選擇器

Question

我有一個jqGrid，有一個動態填充filterToolbar下拉框的字段。我希望這些相同的結果顯示在「添加記錄」對話框中，爲產品和環境字段提供下拉選擇器而不是文本輸入字段。正如你所看到的，我試圖在beforeShowForm事件中做到這一點。這是否是適當的地方？將值設置爲之前定義的prodValues和envValues變量值是很好的，但如果有必要，我可以再次發出ajax請求（我已經嘗試並且失敗了）。

就這樣，代碼仍會爲產品和環境字段生成帶有文本輸入的表單。我如何將它們更改爲選擇器？

$(function() { 
      var grid = $("#PSGrid"); 

      var prodValues = $.ajax({ 
       url: "jqGridHandler.ashx?oper=pVals", 
       async: false, 
       success: function (data) { 

       } 
      }).responseText; 

      var envValues = $.ajax({ 
       url: "jqGridHandler.ashx?oper=eVals", 
       async: false, 
       success: function (data) { 

       } 
      }).responseText; 

      var lastsel = -1; 

      // build the grid 
      grid.jqGrid({ 
       url: 'jqGridHandler.ashx', 
       editurl: 'jqGridEditor.ashx', 
       datatype: 'json', 
       height: 550, 
       width: 'auto', 
       colNames: ['ID', 'Product', 'Environment', 'Hostname', 'IP', 'Description', 'Type', 'Ports Used'], 
       colModel: [ 
        { name: 'ID', index: 'ID', width: 50, sortable: true, hidden: false, editable: false, key: true }, 
        { 
         name: 'Product', index: 'Product', width: 125, sortable: true, editable: true, 
         stype: 'select', searchoptions: { value: prodValues, sopt: ['eq'] } 
        }, 
        { 
         name: 'Environment', index: 'Environment', width: 100, sortable: true, editable: true, 
         stype: 'select', searchoptions: { value: envValues, sopt: ['eq'] } 
        }, 
        { name: 'Hostname', index: 'Hostname', width: 200, sortable: true, editable: true }, 
        { name: 'IP', index: 'IP', width: 125, sortable: false, editable: true }, 
        { name: 'Description', index: 'Description', width: 200, sortable: true, editable: true }, 
        { name: 'Type', index: 'Type', width: 75, sortable: true, editable: true }, 
        { name: 'Ports Used', index: 'Ports Used', width: 80, sortable: false, editable: true } 
       ], 
       rowNum: 1000, // hack to show everything; there's probably a better property to use than this 
       pager: '#PSGridPager', 
       sortname: 'ID', 
       pgbuttons: false, 
       pgtext: null, 
       viewrecords: false, 
       sortorder: 'asc', 
       ignoreCase: true, 
       caption: 'Click a row to edit. [Enter] to save, [Esc] to cancel.', 
       loadonce: true, 
       onSelectRow: function (id) { 
        if (id && id !== lastsel) { 
         grid.jqGrid('restoreRow', lastsel); 
         grid.jqGrid('editRow', id, true); 
         lastsel = id; 
        } 
       } 
      }); 

      grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" }); 
      grid.jqGrid('navGrid', '#PSGridPager', { edit: false, add: true, del: true, search: false, refresh: true, paging: false }, 
       { /* edit options */ }, 
       { /* add options */ 
        closeOnEscape: true, 
        width: 400, 
        beforeShowForm: function (formid) { 
         $(this).setColProp('Product', { editoptions: { value: prodValues } }); 
         $(this).setColProp('Environment', { editoptions: { value: envValues } }); 
        } 
       }); 
      grid.jqGrid('navButtonAdd', '#PSGridPager', { 
       caption: "Export to Excel", 
       onClickButton: function() { 
        grid.jqGrid('excelExport', { url: "jqGridHandler.ashx" }); 
       } 
      }); 
     }); 

Answer 1

將其配置爲在colModel一個選擇：

formatter:'select', edittype:"select", editoptions:{ value: prodValues } 

，然後刪除您beforeShowForm代碼。