这是一个常见问题，但我不知道如何使用 KendoUI 小部件和 Javascript 来解决它。 我有一个 KendoGrid，其数据源来自对 Web 服务的 AJAX 调用。 数据绑定(bind)到列。两列(源和目标)是两个下拉列表:
每列定义为
if (stringStartsWith(colTitle, 'Source')) {
columns.push({
field: dataItem.replace(/\s+/g, ''),
title: colTitle,
width: 150,
locked: false,
editor: sourceDropDownEditor,
//template: "#=SourcetankIdentifier#",
attributes: { style: "text-align: left" },
type: "text"
});
}
SourceDropDownEditor 如下:
function sourceDropDownEditor(container, options) {
$('<input id="sourcesDropDownList" required data-text-field="Source" data-value-field="Source" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Source",
dataValueField: "Source",
dataSource: Sources
});
}
目的地下拉列表也是如此。
现在，我想要的是，当用户单击“编辑”按钮(网格是使用“内联编辑”定义的)并从源 DDL 中选择某个源值时；目标 DDL 中的列表必须根据此值进行更改。
我编写了一个函数来检索正确的列表，具体取决于源 DDL 中选择的值。但我不能做的是获取该行的目标 DLL 并相应地设置数据源。
根据要求提供更多详细信息:
网格是动态构建的:
function generateGrid(JSONData) {
var model = generateModel(JSONData, selectedMenu);
var columns = generateColumns(model);
var data = generateData(gridData, columns);
var grid = $("#mainGrid").kendoGrid({
edit: function (e) {
..
},
dataSource: {
data: data,
schema: {
model: model
},
sort: {
field: defaultSort.replace(/\s+/g, ''),
dir: "desc"
}
},
toolbar: [
..
],
columns: columns,
editable: "inline",
sortable: true,
resizable: true,
filterable: true,
selectable: "multiple",
cancel: function(e) {
$('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
},
剑道道场
这里dojo.telerik.com/uXeKa 。它基本上反射(reflect)了网格模板和列字段
最终解决方案
最终解决方案在这里:dojo.telerik.com/uXeKa/2 。 不需要向网格的编辑功能中添加任何内容。只需要实现Source DDL的onChange函数，并设置destination的数据源即可。
最佳答案
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var sources = [];
var destinations = [];
var products = [{
ProductID: 1,
ProductName: "Chai",
SourceID: 1,
DestinationID: 1,
}, {
ProductID: 2,
ProductName: "Chang",
SourceID: 2,
DestinationID: 1,
}, {
ProductID: 3,
ProductName: "Aniseed Syrup",
SourceID: 3,
DestinationID: 2,
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
SourceID: 4,
DestinationID: 2,
}, {
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
SourceID: 4,
DestinationID: 2,
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" }
}
}
},
pageSize: 10
},
sortable: true,
edit: onGridEdit,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "ProductName" },
{ field: "SourceID", title: "SourceID", values: sources },
{ field: "DestinationID", title: "DestinationID", values: destinations },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
var destinationID = 0;
function onGridEdit(arg) {
destinationID = arg.model.DestinationID;
$.ajax({
url: "http://localhost:3470/Home/GetSource",
type: 'GET',
success: function (data) {
var sourceDDL = $(arg.container).find("select[name^='SourceID']").data("kendoDropDownList");
sourceDDL.bind("change", onChange);
sourceDDL.setDataSource(data);
sourceDDL.value(arg.model.SourceID);
onChange();
}
});
}
function onChange(arg) {
var sourceid = $("select[name^='SourceID']").data("kendoDropDownList").value();
$.ajax({
url: "http://localhost:3470/Home/GetDestination",
type: 'GET',
data: { SourceID: sourceid },
success: function (data) {
var destinationDDL = $("select[name^='DestinationID']").data("kendoDropDownList");
destinationDDL.setDataSource(data);
if (arg) {
// Please uncomment below code if you want to reset ddl value on sourceDDl value change
// destinationDDL.select(-1);
}
else {
destinationDDL.value(destinationID);
destinationID = 0;
}
}
});
}
</script>
</body>
</html>
供引用:-
public class Source
{
public int value { get; set; }
public string text { get; set; }
}
public class Destination
{
public int value { get; set; }
public string text { get; set; }
}
.....
.....
public ActionResult GetSource()
{
List<Source> list = new List<Source>();
list.Add(new Source() { value = 1, text = "cat1" });
list.Add(new Source() { value = 2, text = "cat2" });
list.Add(new Source() { value = 3, text = "cat3" });
list.Add(new Source() { value = 4, text = "cat4" });
list.Add(new Source() { value = 5, text = "cat5" });
return Json(list, JsonRequestBehavior.AllowGet);
}
public ActionResult GetDestination(int? SourceID)
{
List<Destination> list = new List<Destination>();
list.Add(new Destination() { value = 1, text = "des1_" + Convert.ToString(SourceID) });
list.Add(new Destination() { value = 2, text = "des2_" });
list.Add(new Destination() { value = 3, text = "des3_" });
list.Add(new Destination() { value = 4, text = "des4_" });
list.Add(new Destination() { value = 5, text = "des5_" });
return Json(list, JsonRequestBehavior.AllowGet);
}
更新 1:(根据您的编辑器，我更新了 jquery 选择器语句)
function onGridEdit(arg) {
var sourceDDL = $(arg.container).find("input[id^='sourcesDropDownList']").data("kendoDropDownList");
}
function onChange(arg) {
var sourceid = $("input[id^='sourcesDropDownList']").data("kendoDropDownList").value();
var destinationDDL = $("input[id^='destinationsDropDownList']").data("kendoDropDownList");
}
如果有任何疑问，请告诉我。
关于jquery - 在 KendoGrid 中重新绑定(bind) DropDownList，具体取决于同一行上其他 DropDownList 中选择的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35058446/