我有一个恼人的,有点奇怪的错误。我在knockout中有一个网格,它有几个列,其中一个是可编辑的。这个列为每一行生成一个文本框输入。
当用户编辑一行,然后按Tab键跳到下一行时,焦点将跳回到刚编辑的行。这种情况只会发生一次,因此如果再次按Tab键,则可以跳到下一个框。
如果您不编辑文本框,跳回行为将不会发生。我很难看到到底是什么导致了这种行为。
视图中挖空网格的代码:
<table class="table table-responsive table-striped center table-hover" style="clear: both; margin-bottom: 10px;" id="resultsTable">
<thead>
<tr>
<th class="col-md-2"><b>Culture</b></th>
<th class="col-md-2"><b>Section</b></th>
<th class="col-md-2"><b>Name</b></th>
<th class="col-md-2"><b>Value</b></th>
<th class="col-md-2"><b>LastChangeOn</b></th>
<th class="col-md-2"></th>
</tr>
</thead>
<tbody data-bind='foreach: Items'>
<tr>
<td class="col-md-2">
<span data-bind="text: Culture"></span>
</td>
<td class="col-md-2">
<span data-bind="text: Section"></span>
</td>
<td class="col-md-2">
<span data-bind="text: Name"></span>
</td>
<td class="col-md-2">
<input type="text" data-bind="value: Value" />
</td>
<td class="col-md-2">
<span data-bind="text: LastChangeOn"></span>
</td>
<td class="col-md-2">
<span data-bind="text: Id, visible: false"></span>
</td>
</tr>
</tbody>
</table>
javascript的代码:
<script type="text/javascript">
var _VM;
var initialLoad = true;
$(function () {
LoadKnockoutContent(true);
});
$("#SearchButton").on("click", function (e) {
_VM.moveToFirstPage();
});
IndexModel = function (initialData) {
var _self = this;
PagedViewModel.call(_self);
_self.Items = ko.observableArray();
_self.CurrentPage.subscribe(function (value) {
$("#SearchCriteria_HiddenPage").val(value);
LoadKnockoutContent(false, _self.Release);
});
_self.loadModelData = function (data) {
_self.CurrentPage(data.CurrentPage);
_self.PageSize = data.PageSize;
_self.MaxPageIndex(data.PageCount);
_self.Items(ToResourcesArray(data.Resources, _self));
}
_self.loadModelData(initialData);
};
ResourceModel = function (item, parent) {
var _self = this;
_self.Parent = parent;
_self.Id = item.Id;
_self.Culture = ko.observable(item.Culture);
_self.Section = ko.observable(item.Section);
_self.Name = ko.observable(item.Name);
_self.Value = ko.observable(item.Value);
_self.Value.subscribe(function (newValue) {
// Send the new value to the backend
SaveResource(newValue, item.Id);
});
if (!item.LastChangeOn == "") {
_self.LastChangeOn = ko.observable(parseJsonDate(item.LastChangeOn).toPaddedDateTimeString());
}
else {
_self.LastChangeOn = ko.observable(item.LastChangeOn);
}
}
function ToResourcesArray(data, parent) {
var items = ko.utils.arrayMap(data, function (item) {
return new ResourceModel(item, parent);
});
return items;
}
function LoadKnockoutContent(initialLoad, callback, callback2) {
// Call to the back end, passing along the search criteria
}
function SaveResource(newValue, Id) {
$.ajax({
url: '@Url.Action("UpdateResource", "Resource")',
data: JSON.stringify({ id: Id, newValue: newValue }),
type: 'POST',
cache: false,
contentType: 'application/json;',
dataType: 'json',
success: function (data) {
if (data.isSuccess) {
// Success, we need to reload here as well else the last changed on field is not updated in the grid overview
LoadKnockoutContent(false);
} else {
alertify.error(data.message);
// Refresh the view else the value field will stay empty while it is not saved.
// A reload will show the grid again with the previous value.
LoadKnockoutContent(false);
}
},
error: function (request, status, error) {
alert(request.responseText);
}
});
}
</script>
日
1条答案
按热度按时间t98cgbkg1#
我已经解决了这个问题。
问题是每次调用保存函数后网格都被重新加载。这种情况只会在保存失败时发生。如果每次保存后网格都被重新加载,则当您使用Tab键时,将再次从网格的第一行开始。