Question

我的屏幕上有两个下拉菜单，一个是正常的Razor下拉菜单，另一个是Jqgrid下拉菜单。 Razor下拉代码如下，

 <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"
        }

    });

此网格的Addnew按钮

 $("#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下拉列表应自动填充剃刀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，如下所示。在ajax功能中执行dataInit来电添加填充您的下拉列表。希望这会对你有所帮助。

{
    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/

如何根据其他下拉列表数据加载Jqgrid Dropdown？

1 个答案: