javascript - 编辑行时如何为 jqgrid 中的字段提供不同的下拉选项

Question

您好，我希望能够向用户显示一组不同的下拉选项，具体取决于他们是创建新行还是编辑先前创建的行。该列表保存在数据库中，我将 JQ Grid 与 MVC4 结合使用。

具体来说，我想将选择限制为一个元素，并在创建新行时通过网格强制执行默认值。如果他们正在编辑一行，我想给他们更多选择。

我最初的计划是在我的 mvc 应用程序中的网格 Controller 中执行此操作，但是因为 JQ Grid 在加载网格之前加载下拉列表，而不是在您选择编辑行时加载，所以这是不可能的.

我认为我应该为此使用 dataEvents，但我不确定。

{ name: 'CodeListStatusId', index: 'CodeListStatusId', editable: true, edittype: "select", editoptions: { value: getStatusCodes(),  
            dataEvents: [
                  {  type: 'change',
                    fn: function (e) {
                        var row = $(#CodeListGrid).closest('tr.jqgrow');
                        var rowId = row.attr('CodeListId');
                      $("select#" + rowId + "_State", row[0]).value("1 : Draft");

                    }
                  }
            ]
        }, formatter: 'select' }

Answer 1

要在每次选择编辑按钮时加载下拉列表，请使用dataUrl。这样做的优点是它需要一个为 select 语句返回 HTML 的 URL。这使我可以将其指向我的 Controller ，在其中我可以执行一些逻辑来决定数据库中的哪些元素显示在下拉列表中。要将数据传递到 Controller ，请使用ajaxSelectOptions。我的下拉菜单变成了

{ 
    name: 'CodeListStatusId', 
    index: 'CodeListStatusId', 
    editable: true, 
    edittype: "select", 
    editoptions: { 
        value: getStatusCodes(), 
        dataUrl: window.g_baseUrl + 'CodeList/DisplayCodeListStatuses/' 
    }, 
    formatter: 'select' 
}

ajaxSelect 代码是

ajaxSelectOptions:      //use this for combination with dataUrl for formatter:select
{
    data: {
        id: function () {
            var selectedRowId = jQuery('#CodeListGrid').jqGrid('getGridParam', 'selrow');
            if (selectedRowId == null) {
                return 0;
            }
            return selectedRowId;
        }
    }
},

当您选择要编辑的行然后立即添加新行时，出现了一个错误。旧行 ID 正在传递给新行。为了阻止这种情况，我添加了行

$('#CodeListGrid').trigger('reloadGrid');

到editparams的aftersave函数进行保存。

对于任何想要全面了解这一切的人，这里是我的网格的代码:

$('#CodeListGrid').jqGrid({
    url: window.g_baseUrl + 'CodeList/CodeList/?ContextId=' + $('#ContextId').val(),
    editurl: window.g_baseUrl + 'CodeList/Save/?ContextId=' + $('#ContextId').val(),
    datatype: 'json',
    mtype: 'GET',
    colNames: ['CodeLIst Id', 'CodeList Name', 'Description', 'Effective Date', 'Expiration Date', 'Last Modified', 'Modified By', 'Status'],
    colModel: [
        { name: 'CodeListId', index: 'CodeListId', editable: true, hidden: true },
        { name: 'Name', index: 'Name', editable: true, edittype: "text", editoptions: { maxlength: 50 }, editrules: { required: true } },
        { name: 'Description', index: 'Description', editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: { required: true } },
        {
            name: 'EffectiveDate',
            index: 'EffectiveDate',
            editable: true,
            editoptions: {
                dataInit: function (el) {
                    $(el).datepicker({
                        dateFormat: "dd-mm-yy",
                        changeYear: true,
                        minDate: '+1D',
                        changeMonth: true,
                        showButtonPanel: true,
                        onClose: function () {
                            var currentDate = $('[name="EffectiveDate"]').datepicker("getDate");
                            currentDate.setDate(currentDate.getDate()+1);
                            $('[name="ExpirationDate"]').datepicker("option", "minDate", currentDate);
                        }
                    });
               }
            }
        },
        {
            name: 'ExpirationDate', index: 'ExpirationDate', editable: true, editrules: { required: true }, editoptions: {
                dataInit: function (el) {
                    $(el).datepicker({
                        dateFormat: "dd-mm-yy",
                        changeYear: true,
                        changeMonth: true,
                        minDate: '+2D',
                        showButtonPanel: true
                    });
                }
            }
        },
        {name: 'ModifiedDate', index: 'ModifiedDate'},
        { name: 'ModifiedName', index: 'ModifiedName', editable: true, edittype: "text", editoptions: { maxlength: 50 }, editrules: { required: true } },

        { name: 'CodeListStatusId', index: 'CodeListStatusId', editable: true, edittype: "select", editoptions: { value: getStatusCodes(), dataUrl: window.g_baseUrl + 'CodeList/DisplayCodeListStatuses/' }, formatter: 'select' }
    ],
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'Name',
    sortorder: 'Asc',
    viewrecords: true,
    gridview: true,
    caption: 'CodeLists',
    height: '100%',
    width: totalWidth,
    ajaxSelectOptions:      //use this for combination with dataUrl for formatter:select
    {
        data: {
            id: function () {
                var selectedRowId = jQuery('#CodeListGrid').jqGrid('getGridParam', 'selrow');
                if (selectedRowId == null) {
                    return 0;
                }
                return selectedRowId;
            }
        }
    },
});

如果您想了解更多信息，我发现 API 上的此页面很有帮助 Triand .