Возврат фокуса на следующий элемент ввода в таблице после обратной передачи - PullRequest
Новая
       25

Возврат фокуса на следующий элемент ввода в таблице после обратной передачи

0 голосов
/ 20 марта 2019

У меня есть экран с таблицей, в которой может быть любое количество полей ввода в зависимости от фильтров, которые ограничивают отображаемые записи. Рядом с каждым полем ввода находится ссылка, по которой пользователь нажимает, чтобы сохранить данные для этой записи в базе данных. То, что я пытаюсь сделать, это когда пользователь нажимает кнопку сохранения для любой данной строки, я хочу, чтобы курсор переместился к следующему полю ввода в следующей строке, если она существует. Я знаю, что постбэк сотрет мое текущее местоположение курсора, поэтому я безуспешно пытался сохранить его в переменной. Любая помощь будет оценена. Яваскрипт, основанный на моем понимании, должен получить элемент и сохранить его в скрытом поле. В результате я получаю URL-адрес моего сайта. Только когда я сохраню поле в поле test2, я получу фактический сохраненный элемент. Должен ли я попытаться как-то получить координаты элемента и сохранить это? Но если я сделаю это, то как получить следующее поле ввода, доступное в таблице?

Определение таблицы и JavaScript ниже: 

$('.checklistequipmentinsertlink').mousedown(function () {
    document.getElementById('savedelement').value = document.querySelector("a:active");
    var test2 = document.querySelector("a:active");
    var test = document.getElementById('savedelement').value;
});
<div id="scrollbox" class="tablediv" onscroll="javascript:document.getElementById('scrollposition').value = this.scrollTop">
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayName("Equipment/Location")
                </th>
                <th>
                    @Html.DisplayName("Category")
                </th>
                <th>
                    @Html.DisplayName("Expected Count/Checkoff")
                </th>
                <th>
                    @Html.DisplayName("Actual Count/Checkoff")
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model.postChecklistEqupmentList != null)
            {
                @foreach (var item in Model.postChecklistEqupmentList)
                {
                    <tr>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_ID)
                        </td>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_ID)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_Desc)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Equipment_Category_Desc)
                        </td>
                        <td id="expectedcount">
                            @Html.DisplayFor(modelitem => item.Equipment_Count_Or_Checked)
                        </td>
                        <td>
                            @Html.TextBoxFor(modelitem => item.Actual_Count_Or_Checked, new
                             {
                                htmlAttributes = new
                                  {
                                     @class = "form-control"
                                  },
                                autofocus = "autofocus"
                            })
                        </td>
                        <td>
                            <a href="#" class="checklistequipmentinsertlink">Save</a>
                        </td>
                    </tr>
                }
            }

        </tbody>
    </table>
</div>

1 Ответ

0 голосов
/ 20 марта 2019

Хорошо, после того, как я проснулся этим утром, я решил попытаться решить эту проблему по-другому.Что я придумал, так это попытался выяснить, в какой строке текущей таблицы щелкнул мой элемент сохранения.Я использовал jquery, чтобы помочь мне получить ту информацию, которую вы увидите в функции getCurrentRowClicked .Эта функция запускается при нажатии на одну из ссылок сохранения.Затем, когда экран выполняет событие windows.onload , я запускаю функцию movePostChecklistCursorToNextRow , чтобы во время загрузки я мог расположить фокус в нужном месте в таблице или, если таблица это делаетнет никаких записей, то в одном из окон поиска у меня над таблицей.Я не уверен, что это самый чистый способ сделать то, что я хотел, но он работает.

function getCurrentRowClicked(el) {
    document.getElementById('savedRowCount').value = $(el).closest('tr').index() + 1;    
}


function movePostChecklistCursorToNextRow() {
    var stringCount = document.getElementById('savedRowCount').value;
    var rowCount = parseInt(stringCount);  
    var verityRowsExist = $('.table tr:eq(1)').index();
    var lastRow = $('.table tr:last').index() + 1;    
    if (verityRowsExist > -1) {
        if (rowCount < lastRow) {
            rowCount = rowCount + 1
            $('.table tr:eq(' + rowCount + ')').find('input').focus();
        }
        else {
            $('.table tr:last').find('input').focus();
        }
    }    
    else
    {
        $('#equipmentSearch').focus();
        getCurrentRowClicked(this);
    }
}
<div class="main">
    <h2>Post Checklist - Equipment/Location Checks</h2>
    <br />
    <form method="post">
        <input asp-for="CurrentDeputyID" hidden />
        <input asp-for="SavedActivityLogID" hidden />
        <input asp-for="SavedChecklistID" hidden />
        <input asp-for="ScrollPostion" id="scrollposition" hidden />
        <input asp-for="savedRowCount" id="savedRowCount" hidden />
        <div class="row">
            <div class="col-sm-4">
                <a href="./Post_Checklist_Notes">Enter Notes</a>
            </div>
            <div class="col-sm-4">
                <a href="./Post_Checklist_Stats">Enter Stats</a>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-4">
                <label asp-for="postChecklistEquipmentView.Checklist_Equipment_Desc">Equipment</label>
                <input asp-for="postChecklistEquipmentView.Checklist_Equipment_Desc" class="form-control" id="equipmentSearch" />
            </div>
            <div class="col-sm-4">
                <label asp-for="postChecklistEquipmentView.Equipment_Category_ID">Category</label>
                <select asp-for="postChecklistEquipmentView.Equipment_Category_ID" asp-items="@(new SelectList(Model.equipmentCategoriesDropDown,"Equipment_Category_ID", "Equipment_Category_Desc"))" class="form-control"></select>
            </div>
            <div class="col-sm-4">
                <input type="submit" value="Search" id="searchButton" class="btn search-btn btn-light form-control" />
            </div>
        </div>
        <br />
    </form>
</div>

<div id="scrollbox" class="tablediv" onscroll="javascript:document.getElementById('scrollposition').value = this.scrollTop">
    <table class="table" id="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayName("Equipment/Location")
                </th>
                <th>
                    @Html.DisplayName("Category")
                </th>
                <th>
                    @Html.DisplayName("Expected Count/Checkoff")
                </th>
                <th>
                    @Html.DisplayName("Actual Count/Checkoff")
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model.postChecklistEqupmentList != null)
            {
                @foreach (var item in Model.postChecklistEqupmentList)
                {
                    <tr>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_ID)
                        </td>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_ID)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_Desc)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Equipment_Category_Desc)
                        </td>
                        <td id="expectedcount">
                            @Html.DisplayFor(modelitem => item.Equipment_Count_Or_Checked)
                        </td>
                        <td>
                            @Html.TextBoxFor(modelitem => item.Actual_Count_Or_Checked)
                        </td>
                        <td>
                            <a href="#" class="checklistequipmentinsertlink">Save</a>
                        </td>
                    </tr>
                }
            }

        </tbody>
    </table>
</div>
...