Question

我有一个烦人的，有点奇怪的错误。我在淘汰赛中有一个网格，其中有几列，其中一列是可编辑的。此列为每一行生成一个文本框输入。

当用户编辑一行，然后跳至下一行时，焦点将跳回到刚刚编辑的行。这只会发生一次，因此，如果再次标签，则可以标签到下一个框。

如果不编辑文本框，则不会发生跳回行为。我很难知道是什么导致了这种行为。

视图中的剔除网格的代码：

<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>

dd

Answer 1

我已经解决了这个问题。

问题是曾经调用过save函数之后重新加载了Grid。仅当保存失败时才会发生这种情况。如果每次保存后都重新加载了网格，那么当您进行制表时，您将再次从网格的第一行开始。

UI焦点错误，选项卡后焦点跳回到上一个编辑的文本框

1 个答案: