Question

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

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

我最初的计划是在我的mvc应用程序中为网格控制器执行此操作，但是因为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。这允许我将它指向我的控制器，在那里我可以执行一些逻辑来决定我的数据库中的哪些元素在下拉列表中显示。要将数据传递给控制器，请使用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');

到aftersave editparams的{{1}}功能进行保存。

对于想要全面了解所有内容的人来说，这是我网格的代码：

$('#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。

如何在编辑行时为jqgrid中的字段设置不同的下拉选项

1 个答案: