如何處理jqGrid combobox列中的'value'和'text'屬性？

Question

我有Trirand MVC jqGrid包，但我確定這個問題是整個jqGrid計數的。我有一個綁定到Id的列：

new JQGridColumn 
    { 
     DataField = "PaymentSchemeId",           
     HeaderText = "Payment Scheme", 
     DataType = typeof(ParkadePaymentScheme), 
     Searchable = true, 
     SearchToolBarOperation = SearchOperation.IsEqualTo, 
     SearchType = SearchType.DropDown, 
     SearchControlID = WidgetNames.DropDownSearchPaymentScheme, 
     Editable = true, 
     EditType = EditType.DropDown, 
     EditorControlID = WidgetNames.DropDownEditPaymentScheme 
    }, 

在我的GridModel（視圖模型的網格）。在顯示模式下，網格按預期顯示值PaymentSchemeId。在編輯模式下，它會顯示所有付款方案的下拉菜單，選擇後顯示該人的姓名而不是身份證，但我認爲這只是副作用。

如何在顯示PaymentSchemeName屬性值的同時將該列設置爲綁定並存儲PaymentSchemeId值？

由網格渲染的腳本相當長，但我將它全部包括在內，因爲害怕會淡化某些有意義的東西。

jQuery(document).ready(function() { 
    jQuery('#IndexGrid').jqGrid({ 
     url: '/Parkade/IndexDataRequest?jqGridID=IndexGrid', 
     editurl: '/Parkade/EditRow?jqGridID=IndexGrid&editMode=1', 
     mtype: 'GET', 
     datatype: 'json', 
     page: 1, 
     colNames: ["Edit Actions", "Id", "Name", "Payment Scheme", "Active?", "Remarks"], 
     colModel: [{ 
      "search": false, 
      "sortable": false, 
      "formatoptions": { 
       "editbutton": true, 
       "delbutton": true, 
       "keys": true 
      }, 
      "width": 50, 
      "formatter": "actions", 
      "name": "", 
      "index": "" 
     }, { 
      "searchoptions": { 
       "searchhidden": true 
      }, 
      "index": "Id", 
      "hidden": true, 
      "key": true, 
      "name": "Id" 
     }, { 
      "stype": "select", 
      "editable": true, 
      "index": "Name", 
      "searchoptions": { 
       "value": ":All;Brooklyn Mall:Brooklyn Mall" 
      }, 
      "name": "Name" 
     }, { 
      "editoptions": { 
       "value": "3:Pay on Entry;1:Pay on Exit;2:Pay on Foot" 
      }, 
      "editable": true, 
      "stype": "select", 
      "edittype": "select", 
      "searchoptions": { 
       "value": ":All;Pay on Foot:Pay on Foot" 
      }, 
      "name": "PaymentSchemeId", 
      "index": "PaymentSchemeId" 
     }, { 
      "editoptions": { 
       "value": "True:Yes;False:No" 
      }, 
      "editable": true, 
      "stype": "select", 
      "edittype": "select", 
      "searchoptions": { 
       "value": ":All;True:True" 
      }, 
      "name": "IsActive", 
      "index": "IsActive" 
     }, { 
      "width": 300, 
      "index": "Remarks", 
      "searchoptions": { 
       dataInit: function (el) { 
        setTimeout(function() { 
         var ec = 'AutoCompleteRemarks'; 
         if (typeof (jQuery(el).autocomplete) !== 'function') alert('JQAutoComplete javascript not present on the page. Please, include jquery.jqAutoComplete.min.js'); 
         jQuery(el).autocomplete(eval(ec + '_acid')); 
        }, 200); 
       } 
      }, 
      "editable": true, 
      "name": "Remarks" 
     }], 
     viewrecords: true, 
     scrollrows: false, 
     prmNames: { 
      id: "Id" 
     }, 
     headertitles: true, 
     autowidth: true, 
     pager: jQuery('#IndexGrid_pager'), 
     loadError: jqGrid_aspnet_loadErrorHandler, 
     rowNum: 20, 
     rowList: [10, 20, 30], 
     editDialogOptions: { 
      "recreateForm": true, 
      errorTextFormat: function (data) { 
       return 'Error: ' + data.responseText 
      }, 
      editData: { 
       __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() 
      } 
     }, 
     addDialogOptions: { 
      "recreateForm": true, 
      errorTextFormat: function (data) { 
       return 'Error: ' + data.responseText 
      }, 
      editData: { 
       __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() 
      } 
     }, 
     delDialogOptions: { 
      "recreateForm": true, 
      errorTextFormat: function (data) { 
       return 'Error: ' + data.responseText 
      }, 
      delData: { 
       __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() 
      } 
     }, 
     searchDialogOptions: { 
      "multipleSearch": true, 
      "recreateForm": true, 
      "resize": false 
     }, 
     viewRowDialogOptions: {}, 
     jsonReader: { 
      id: "Id" 
     }, 
     sortorder: 'asc', 
     height: '85%', 
     viewsortcols: [false, 'vertical', true] 
    }).navGrid('#IndexGrid_pager', { 
     "edit": false, 
     "add": true, 
     "del": false, 
     "search": true, 
     "refresh": true, 
     "view": false, 
     "position": "left", 
     "cloneToTop": true 
    }, jQuery('#IndexGrid').getGridParam('editDialogOptions'), jQuery('#IndexGrid').getGridParam('addDialogOptions'), jQuery('#IndexGrid').getGridParam('delDialogOptions'), jQuery('#IndexGrid').getGridParam('searchDialogOptions'), jQuery('#IndexGrid').getGridParam('viewRowDialogOptions')).bindKeys(); 

    function jqGrid_aspnet_loadErrorHandler(xht, st, handler) { 
     jQuery(document.body).css('font-size', '100%'); 
     jQuery(document.body).html(xht.responseText); 
    }; 
    jQuery('#IndexGrid').filterToolbar({ 
     "searchOnEnter": false 
    }); 
}); 

的/Parkade/IndexDataRequest?jqGridID=IndexGrid請求的響應是：

{"page":1,"total":1,"records":1,"rows":[{"id":"1","cell":["","1","Brooklyn Mall","2","True",""]}],"userdata":{}} 

這對於PaymentSchemeId一個的2值，這是我期望的，因爲我的實體具有FK表PaymentScheme和I存儲PK的其中一個記錄在PaymentSchemeId，因此Id後綴和整個需要下拉。下拉列表填充在服務器端，如您在JS中看到的：

示例以及添加的其他相關代碼。我期望PaymentSchemeId有一個int值，作爲一個Id。我得到了我期望的。在下拉列表中值與列定義呈現爲

"editoptions": { 
    "value": "3:Pay on Entry;1:Pay on Exit;2:Pay on Foot" 

我非常接近他們的複製逐字例子，所以請不要爲爲什麼GET請求具有jqGridID=IndexGrid查詢字符串是在控制器上忽略：

public JsonResult IndexDataRequest() 
{ 
    var gridModel = new ParkadeGridModel(); 
    JQGridState gridState = gridModel.Grid.GetState(); 
    Session[SessionKeys.JqGridState] = gridState; 
    SetupGrid(gridModel.Grid); 
    ViewData["PaymentSchemeId_Data"] = _indexModel.PaymentSchemes; 
    return gridModel.Grid.DataBind(_indexModel.Items.AsQueryable()); 
} 

之前你問：

private void SetupGrid(JQGrid grid, string indexMsg = null) 
{ 
    _indexModel = BuildIndexModel(); 
    grid.DataUrl = Url.Action("IndexDataRequest"); 
    grid.EditUrl = Url.Action("EditRow"); 
    grid.Columns.Insert(0, new JQGridColumn 
    { 
     EditActionIconsColumn = true, 
     EditActionIconsSettings = new EditActionIconsSettings 
     { 
      SaveOnEnterKeyPress = true 
     }, 
     HeaderText = "Edit Actions", 
     Width = 50, 
     Searchable = false, 
     Sortable = false 
    }); 
    SetupParkadeNameDropDown(grid); 
    SetupPaymentSchemeDropDown(grid); 
    SetupYesNoDropDown(grid); 
} 

和：

private void SetupPaymentSchemeDropDown(JQGrid parkadesGrid) 
{ 
    JQGridColumn paymentColumn = parkadesGrid.Columns.Find(c => c.DataField == "PaymentSchemeId"); 
    if (parkadesGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData) 
    { 
     var searchList = _indexModel.Items.Select(m => m.PaymentSchemeName).Distinct().Select(l => new SelectListItem { Text = l, Value = l }); 
     paymentColumn.SearchList = searchList.ToList(); 
     paymentColumn.SearchList.Insert(0, new SelectListItem { Text = "All", Value = "" }); 

     var editList = _paymentSchemeRepository.Get().OrderBy(p => p.Name).ToList(); 
     paymentColumn.EditList = editList.Select(l => new SelectListItem { Text = l.Name, Value = l.Id.ToString() }).ToList(); 
    } 
} 

我想我應該使用'selector'作爲這個FK列的格式化程序，但是我仍然試圖在我的列定義中使用Trirand的CustomFormatter來達到這個目的，因爲他們沒有打算給我們一個DropDownFormatter選項。

Answer 1

我不能完全重現你的問題，但我建議你做以下兩個步驟：

• 添加任何名稱，例如name: "act"到第一"Edit Actions"列的定義。 jqGrid無法正確使用屬性colModel中的列;
• 將formatter: "select"添加到列PaymentSchemeId的屬性中。

的formatter: "select"的使用將遵循用戶將看到Pay on Foot而不是不可理解ID 2的。來自服務器的JSON響應仍應包含2，但由於使用formatter: "select"，jqGrid將顯示值爲Pay on Foot。在添加或編輯操作期間發送的數據將包含整數（1,2或3），而不是用戶選擇的文本（「付款入金」，「退出付款」和「付款」）。因此，您只能在服務器端使用整數ID，用戶只能看到相應的文本。我認爲這是你想要的。

如果您希望用戶只能看到整數，那麼您應該使用"value": "3:3;1:1;2:2"而不是"value": "3:Pay on Entry;1:Pay on Exit;2:Pay on Foot"。