如何基於其他下拉數據加載Jqgrid Dropdown？

Question

我的屏幕上有兩個下拉菜單，一個是普通的Razor下拉菜單，另一個是Jqgrid下拉菜單。 剃刀下拉代碼如下，

 <div class="col-md-4">
    <label for="" class="control-label">Loan Currency</label><br />
    @Html.DropDownListFor(m => m.LoanCurrency, Model.Currencies.ToSelectListItems(x => x.CurrencyCode, x => x.Id.ToString(), "", true, "", "Select"), new { @class = "form-control" }).DisableIf(() => Model.IsReadOnly == true)
    @Html.HiddenFor(m => m.LoanCurrency)
</div> 

和我的Jqgrid

 jQuery("#grdDrawdownSchedule").jqGrid({
        url: RootUrl + 'ECB/DDSGridData',
        datatype: 'json',
        mtype: 'POST',
        height: 130,
        colNames: ['id', 'Drawdown Date', 'Currency', 'Amount'],
        colModel: [
                    { name: 'id', index: 'id', width: 30, sorttype: "int", editable: false, hidden: true },
                    { name: 'DdDate', index: 'DdDate', width: 130, align: 'left', editable: true,
                        editoptions: {
                            readonly: 'readonly',
                            size: 10, maxlengh: 10,
                            dataInit: function (element) {
                                $(element).datepicker({ dateFormat: 'dd-M-yy', changeMonth: true,
                                    changeYear: true, constrainInput: false, showOn: 'both',
                                    buttonImage: RootUrl + 'Content/Images/grid_Calendar.png',
                                    buttonText: 'Show Calendar',
                                    buttonImageOnly: true
                                });
                            }
                        }
                    },
                    { name: 'CurrencyName', index: 'CurrencyName', width: 120, editable: true, edittype: "select"      //, formatter: currencyFmatter
                    },
                    { name: 'Amount', index: 'Amount', align: "right", width: 120, editable: true,
                        editoptions: { size: "20", maxlength: "16", dataInit: function (element) {
                            $(element).keypress(function (e) {
                                $('#AvgMaturityLoan').val("0");
                                if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                                    return false;
                                }
                                var charCode = (e.which) ? e.which : e.keyCode;
                                if (charCode == 46 && this.value.split('.').length > 1)
                                    return false;
                            });
                        }
                        }
                    },
        //{ name: 'tadte', index: 'tdate', width: 130, "editable": true, "sorttype": "date", editrules: { "date": true }, "editoptions": { "dataInit": "initDateEdit"} },                                               
                 ],
        loadComplete: function () {

            $("#grdDrawdownSchedule").setColProp('CurrencyName', { editoptions: { value: JSON.parse(Currencies)} });


        },
        cellEdit: true,
        rowNum: 100,
        rownumbers: true,
        cellsubmit: 'clientArray',
        caption: "Drawdown Schedule",
        multiselect: true,
        shrinkToFit: false, forceFit: true,
        width: 490,
        postData: {
            "lrnid": "@Model.Id",
            "data": "@Model.drawdownSchedule"
        }

    });

並為此網格添加新按鈕

 $("#btnAddNewDrawdownSche").click(function () {

        if (ValidateRow($("#grdDrawdownSchedule"))) {
            var idAddRow = $("#grdDrawdownSchedule").getGridParam("reccount")
            emptyItem = [{ id: idAddRow + 1, DrawdownDate: "", Currency: "", amount: ""}];
            jQuery("#grdDrawdownSchedule").jqGrid('addRowData', 0, emptyItem);

        }
    });

當我單擊網格中的Addnew按鈕時，Jqgrid下拉列表應該自動填充razor dorpdown的數據（如果不為null）。 而且Jqgrid下拉列表從名為currency的變量加載，如下所示

var Currencies = $.ajax
                ({
                    type: 'POST',
                    async: false,
                    url: RootUrl + "ECB/GetJsonCurrencies",
                    cache: true,
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        if (!result) alert('No Currencies Found!!!');
                    },
                    error: function (error) {
                        alert('Failure to retrieve Json.' + error.toString() + "~~~" + error.ErrorMessage);
                    }
                }).responseText;

In which the GetJsonCurrencies method return a Json Currency list. 

選擇剃須刀下拉菜單后，用戶需要在網格中提供詳細信息，因此，當用戶單擊網格中的addnew按鈕時，Jqgrid下拉菜單將自動填充在剃須刀下拉菜單中選擇的值。 怎么做？

Answer 1

您可以使用dataInit在editoptions像以下。 在dataInit函數中執行ajax調用，添加您的下拉列表。 希望這會幫助你。

{
    name: 'CurrencyName',
    index: 'CurrencyName',
    width: 120,
    editable:true,
    edittype: 'select',
    editoptions: { dataInit : function (elem) { 
          var curr = $('#LoanCurrency').val(); //dropdown outside jqgrid value
          if(curr){
              //Your ajax call goes here and populate dropdown with 
              //by the data of ajax call like following.
              $(elem).empty();
              $(elem).append('<option>Currency name 1</option>');
              $(elem).append('<option>Currency name 2</option>');
              $(elem).append('<option>Currency name 3</option>');
          }
       } 
    } 
}

Js Fiddle： http : //jsfiddle.net/azim101/kzh8j6eh/