1

嗨，我希望能够向用户显示一组不同的下拉选项，具体取决于他们是创建新行还是编辑先前创建的行。该列表保存在数据库中，我正在使用 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' }
4

1 回答 1

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。

对于任何想要完整了解这一切的人，这里是我的网格的代码：

$('#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很有帮助。

于 2013-06-07T15:27:10.703 回答