如何处理 jqGrid 组合框列中的“值”和“文本”属性？

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 的值。在编辑模式下，它会显示一个包含所有付款方案的下拉列表，选择一个后，会显示一个人的姓名而不是 Id，但我认为这只是副作用。

如何设置列以在显示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，这是我所期望的，因为我的实体具有表 PaymentScheme 的 FK，并且我将其中一条记录的 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();
    }
}

我认为我应该使用“选择器”作为该 FK 列的格式化程序，但我仍在试图弄清楚如何在我的列定义中使用 Trirand 的 CustomFormatter 来实现这一点，因为他们没有费心给出我们有一个 DropDownFormatter 选项。

Answer 1

我无法完全重现您的问题，但我建议您执行以下两个步骤：

• 在第一个"Edit Actions" 列的定义中添加任何名称，例如name: "act"。 jqGrid 无法正确处理 colModel 中具有 "name": "" 属性的列；
• 将formatter: "select" 添加到PaymentSchemeId 列的属性中。

formatter: "select" 的使用将遵循用户将看到 Pay on Foot 而不是不可理解的 id 2。来自服务器的 JSON 响应应该仍然包含 2，但 jqGrid 将显示该值为 Pay on Foot，因为使用了 formatter: "select"。在添加或编辑操作期间将发送的数据将包含整数（1、2 或 3），而不是用户选择的文本（“入场时付款”、“退出时付款”和“步行付款”）。因此，您只能在服务器端使用整数 id，而用户只会看到相应的文本。我想这就是你想要的。

如果您希望用户只看到整数，那么您应该使用"value": "3:3;1:1;2:2" 而不是"value": "3:Pay on Entry;1:Pay on Exit;2:Pay on Foot"。