Jquery 网格单元中jqwidget dropdownlist的数据库绑定
在jqwidget网格示例中(在jqxGrid左菜单下,打开编辑/编辑),数据在客户端生成。如何将dropdownlist绑定到asp.net MVC3项目中的数据库?(您可以在“演示”选项卡中的“产品”列下查看dropdownlist)您可以使用名为“createeditor”的函数在内部初始化dropdownlist 列定义:Jquery 网格单元中jqwidget dropdownlist的数据库绑定,jquery,asp.net-mvc-3,javascript-framework,jqwidget,Jquery,Asp.net Mvc 3,Javascript Framework,Jqwidget,在jqwidget网格示例中(在jqxGrid左菜单下,打开编辑/编辑),数据在客户端生成。如何将dropdownlist绑定到asp.net MVC3项目中的数据库?(您可以在“演示”选项卡中的“产品”列下查看dropdownlist)您可以使用名为“createeditor”的函数在内部初始化dropdownlist 列定义: { text: 'Proyecto', columntype: 'dropdownlist', datafield: 'jobid', width: 10,
{ text: 'Proyecto', columntype: 'dropdownlist', datafield: 'jobid', width: 10,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: 'displaylabel', valueMember: 'catalogvalue', source: dropdownListAdapter });
}
}
DropDownList的数据适配器可以使用类似的代码进行初始化:
source = {
datatype: "xml",
datafields: [
{ name: 'CompanyName' },
{ name: 'ContactName' },
{ name: 'ContactTitle' },
{ name: 'City' },
{ name: 'Country' },
{ name: 'Address' }
],
async: false,
record: 'Table',
url: 'Default.aspx/GetCustomers',
};
var dropdownListAdapter = new $.jqx.dataAdapter(source,
{ contentType: 'application/json; charset=utf-8'}
);
使用数据库初始化dropdownlist时,应该将其绑定到datasource(或dataadapter),并设置selectedIndex。然后,对于行更新,所选值应保持在select上 列定义可能类似于:
{ text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177,
initeditor: function (row, cellvalue, editor) {
var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId");
editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId });
$(document).on('select', editor, function (event) {
selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
});
}
}
变量“selectedrunid”应该全局定义,可能类似于var selectedrunid=-1代码>在jqxgrid初始化之前。然后在updaterow定义中(在源定义中),应该使用下拉列表的选定值。可能是这样的:
if (selectedUrunId != undefined && selectedUrunId != -1) {
rowdata.UrunId = selectedUrunId;
selectedUrunId = -1;
}
此场景的总体场景为:
// prepare the data
var gridSource = {
datatype: "json",
datafields: [{ name: 'KargoId' }, { name: 'UrunAdi' }, { name: 'UrunId', type: 'int' }],
url: 'BindGrid',
updaterow: function (rowid, rowdata) {
// synchronize with the server - send update command
if (selectedUrunId != undefined && selectedUrunId != -1) {
rowdata.UrunId = selectedUrunId;
selectedUrunId = -1;
}
var data = $.param(rowdata);
$.ajax({
dataType: 'json',
url: 'UpdateEditGrid',
data: data,
success: function (data, status, xhr) {
gridDataAdapter.dataBind();
},
error: function (xhr, status, error) {
alert(JSON.stringify(xhr));
}
});
}
};
var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
var dropdownSource = {
datatype: "json",
datafields: [{ name: 'UrunId' }, { name: 'UrunAdi'}],
url: 'BindDropdown'
};
var selectedUrunId = -1;
var dropdownListAdapter = new $.jqx.dataAdapter(dropdownSource);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 670,
source: gridDataAdapter,
editable: true,
theme: theme,
selectionmode: 'singlecell',
columns: [
{ text: '#', datafield: 'KargoId', width: 40 },
{ text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177,
initeditor: function (row, cellvalue, editor) {
var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId");
editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId });
$(document).on('select', editor, function (event) {
selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
});
}
}]
});
最初valueMember出现(数字出现,而不是文本);然后,如果您尝试选择另一项,您可以看到下拉列表的displayMember文本。另一个问题是,若您尝试更新,错误的id值(或错误的valueMember)将进入服务器。