knockout.js UI焦点错误,焦点跳回到选项卡后上次编辑的文本框

r8xiu3jd  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(68)

我有一个恼人的,有点奇怪的错误。我在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>

t98cgbkg

t98cgbkg1#

我已经解决了这个问题。
问题是每次调用保存函数后网格都被重新加载。这种情况只会在保存失败时发生。如果每次保存后网格都被重新加载,则当您使用Tab键时,将再次从网格的第一行开始。

相关问题