Javascript 如何在编辑行时为jqgrid中的字段提供不同的下拉选项_Javascript_Asp.net Mvc_Jqgrid

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

javascript asp.net-mvc jqgrid

Javascript 如何在编辑行时为jqgrid中的字段提供不同的下拉选项,javascript,asp.net-mvc,jqgrid,Javascript,Asp.net Mvc,Jqgrid,您好，我希望能够向用户显示一组不同的下拉选项，具体取决于用户是创建新行还是编辑以前创建的行。这个列表保存在一个数据库中，我使用的是带有MVC4的JQ网格具体来说，我希望将选择限制为一个元素，并在创建新行时通过网格强制执行默认值。如果他们正在编辑一行，我想给他们更多的选择我最初的计划是在mvc应用程序中的网格控制器中执行此操作，但由于JQ grid在加载网格之前加载下拉列表，而不是在您选择编辑行时加载列表，因此这是不可能的我认为我应该使用dataEvents来实现这一点，但我不确定 { na

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

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

我最初的计划是在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' }

要在每次选择编辑按钮时获得要加载的下拉列表，请使用

dataUrl

。这样做的优点是，它使用一个URL为select语句返回HTML。这允许我将它指向我的控制器，在那里我可以执行一些逻辑来决定在下拉列表中显示数据库中的哪些元素。要将数据传递给控制器，请使用

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上的此页面非常有用。