如何基于其他下拉数据加载Jqgrid下拉列表
How to load Jqgrid Dropdown based on other dropdown data?
我的屏幕上有两个下拉列表,一个是普通的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"
}
});
并为此网格添加新按钮
$("#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的数据,如果它不为空。Jqgrid下拉列表从下面的一个名为currencies的变量加载
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下拉列表应该自动填充在剃刀下拉列表中选择的值。怎么做?
您可以在editoptions
中使用dataInit
,如下所示。在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/
相关文章:
- 如何将JSON数据加载到Jqgrid中
- 使用requireJS的jqGrid-网格加载但不起作用
- Jqgrid在第一个下拉索引chnage方法后未重新加载
- jqgrid动态加载选择列表
- 如何在不重新加载的情况下在表单编辑中更改主键后刷新jqgrid行id
- Jqgrid Treegrid在更新本地源数据时重新加载节点
- jqgrid没有在服务器acugis中加载数据,而是在本地运行,一切都很完美
- 当网格视图设置为 true 时,Jqgrid 在 IE9 中显示“正在加载”
- 在初始加载时获取带有 postData 过滤器的 jqGrid,以仅显示客户端过滤行
- 单击按钮时加载 jqGrid,但第二次失败
- 使用滚动重新加载 Jqgrid 时出现问题 - 重复的行数据并缺少最后一页
- 如何通过单击上传按钮在上传文件后重新加载 Jqgrid
- 如何基于其他下拉数据加载Jqgrid下拉列表
- 重新加载jqgrid后维护页码
- 需要加载jqgrid基于下拉列表更改事件
- 我应该在加载Jqgrid之前和加载grid之后使用方法来阻塞屏幕
- 可以't在IE7中加载jqgrid
- 使用jsonstring数据类型加载jqgrid表
- 无法在struts2中使用json加载jqGrid
- 如何重新加载JqGrid网格