一般信息
我已经构建了一个填充了数据的kendo面板栏，它有一个选项，使用户能够编辑面板展开时显示的预填充数据。面板栏嵌套在列表视图中，展开面板时显示的HTML来自Kendo模板。
当前问题
当面板展开并且用户选择编辑内容并添加时，他们按批准按钮添加，但是我收到的文本不正确。我只获取了假设位于第一个面板中的信息。无论我选择编辑和添加哪个面板，我只会推送位于第一个面板中的数据。
HTML
<div class="padding" style="display:none;" id="ApprovalFormWindow">
<div class="container">
<!--<div id="descriptionColumn" style="display:none"><b id="description">Title</b><b id="date">Modified Date</b></div>-->
<div id="descriptionColumn" style="display:none">
<div style="width: 95%; display: table;">
<div style="display: table-row">
<div style="width: 40px; display: table-cell; vertical-align:top;"><b>Title</b></div>
</div>
</div>
</div>
<ul id="listView" style="display:none"></ul>
<div id="pager" style="display:none"></div>
</div>
</div>
<script type="text/x-kendo-tmpl" id="ApprovalContentTemplate">
<li>
<table style="width: 95%;">
<tr>
<td class="selectedValue" style="width:40%; vertical-align:top;">#:Description#</td>
</tr>
</table>
<div id="topTabPanel" style="margin-top: -4px; padding-top: 5px; padding-bottom: 5px; border: 1px solid lightgray !important">
<label style="margin-left : 5px;" for="EditCheckBox">
Edit<input class="editBox" type="checkbox" id="EditCheckBox" value="true" style="margin-left: 5px;">
</label>
<button type="button" class="PreviewItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Preview</button>
<button type="button" class="ApproveItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Approve</button>
</div>
<div id ="PanelSelected" class="row demo-section k-content" style="border-top: 4px solid dodgerblue; border-bottom: 4px solid dodgerblue;">
<div class="col-xs-11" style="margin-top: 5px;">
<form class="form-inline">
<div class="form-group">
<label for="Title" class="required">Title</label>
<div><textarea class="k-textbox ApproversPanel" id="Title" name="Title" style="width: 220px;" readonly>#:Name#</textarea></div>
</div>
<div class="form-group">
<label for="KeyWords" class="required">KeyWords</label>
<div><textarea class="k-textbox ApproversPanel" id="KeyWords" name="KeyWords" style="width: 220px;" readonly>#:KeyWords#</textarea></div>
</div>
<div class="form-group">
<label for="jandra" class="required">Description</label>
<div><textarea class="k-textbox ApproversPanel" id="jandra" name="jandra" style="width: 220px;" readonly>#:jandra#</textarea></div>
</div>
<div class="form-group">
<label for="Summary" class="required">Summary</label>
<div><textarea class="k-textbox ApproversPanel" id="Summary" name="Summary" style="height: 100px; width: 220px;" readonly>#:Summary#</textarea></div>
</div>
</form>
</div>
</div>
</li>
Javascript
serverResponse = [
{
Name: "Test1",
KeyWords: "KeyWord1",
jandra: "Country",
Summary: "Test Item 1",
},
{
Name: "Test2",
KeyWords: "KeyWord2",
jandra: "Rap",
Summary: "Test Item 2",
},
{
Name: "Test3",
KeyWords: "KeyWord3",
jandra: "Pop",
Summary: "Test Item 3",
},
{
Name: "Test4",
KeyWords: "KeyWord4",
jandra: "Rock",
Summary: "Test Item 4",
},
{
Name: "Test5",
KeyWords: "KeyWord5",
jandra: "Blues",
Summary: "Test Item 5",
},
];
var selectedContent;
$("#listView").kendoListView({
dataSource: serverResponse,
autoBind: false,
pageable: true,
template: kendo.template($("#ApprovalContentTemplate").html()),
dataBound: function () {
$("#listView").kendoPanelBar({
// Made it single, however multiple would be nice
expandMode: "single",
select: function (e) {
var retrievedContent = serverResponse._data;
for (var x = 0; x < retrievedContent.length; x++) {
if (e.item.dataset.uid === retrievedContent[x].uid) {
selectedContent = retrievedContent[x];
}
}
},
});
$(".editBox").each(function (e) {
$(this).click(function (d) {
if ($(this).is(":checked")) {
$(".ApproversPanel").attr("readonly", false);
}
else {
$(".ApproversPanel").attr("readonly", true);
$("#ListItemTitle").val(selectedContent.Name);
$("#ListItemKeyWords").val(selectedContent.KeyWords);
$("#ListItemDescription").val(selectedContent.Description);
$("#ListItemSummary").val(selectedContent.ContentSummary);
var testThis = 0;
}
});
});
$(".PreviewItem").each(function (e) {
$(this).click(function (d) {
// Logic not built
});
});
$(".ApproveItem").each(function (e) {
$(this).click(function (d) {
var value = $("#PanelSelected").find(".ApproversPanel").children();
/*
* when a person push this to the datasource it will always push
* the first object in the array no mattyer what panel they selected to edit
* Name: "Test1",
* KeyWords: "KeyWord1",
* jandra: "Country",
* Summary: "Test Item 1",
*/
GetCurrentValue();
});
});
function GetCurrentValue() {
$(".ApproversPanel").each(function (e) {
var title = $("#Title").val();
var KeyWords = $("#KeyWords").val();
var Description = $("#jandra").val();
var ContentSummary = $("Summary").val();
/*
* This gives me the same results. not matter what panel I selected to edit and
* add I always get the first object.
* Name: "Test1",
* KeyWords: "KeyWord1",
* jandra: "Country",
* Summary: "Test Item 1",
*/
});
};
},
}）;
答案 0 :(得分：1)
嗯......你有5个面板，每个面板包含一组所有具有相同ID和名称的文本框。 id必须是唯一的。 id中的GetCurrentValue（）中的jquery选择器将始终返回第一个和第一个，因为jquery假定一个唯一的id并停止（它不知道你想要第四个输入具有相同的id）。您必须以某种方式使每个面板都是唯一的，并使用适当的选择器。
例如，您可以将“批准”按钮更改为
$(".ApproveItem").each(function (e) {
$(this).click(function (d) {
var panel = $($(this).closest("li"));
var data = {
Name: panel.find("#Title").val(),
KeyWords: panel.find("#KeyWords").val(),
jandra: panel.find("#jandra").val(),
Summary: panel.find("#Summary").val()
}
console.log(data);
//var value = $("#PanelSelected").find(".ApproversPanel").children();
/*
* when a person push this to the datasource it will always push
* the first object in the array no mattyer what panel they selected to edit
* Name: "Test1",
* KeyWords: "KeyWord1",
* jandra: "Country",
* Summary: "Test Item 1",
*/
//GetCurrentValue();
});
});
这将获得与单击按钮相关联的面板的引用（使用最接近的），然后使用它来优化数据选择器以查找正确面板的子项。
http://dojo.telerik.com/@Stephen/avitO
我很肯定有更好的方法可以使用Kendo的MVVM（与此处的技术类似但不完全相同：https://stackoverflow.com/a/37998096/4825632）或在所选面板中添加/删除类用于构建更具体的选择器。