Индекс вкладки динамических текстовых полей - PullRequest
Новая
       2

Индекс вкладки динамических текстовых полей

1 голос
/ 03 апреля 2012

У меня есть экран, который позволяет пользователям добавлять и удалять строки, которые они будут использовать для ввода своих результатов. Входные строки создаются на основе выбранного типа образца и предварительно настроенного «шаблона» (например, по моей картинке ... Я выбираю сердца, и по умолчанию добавляются «germs, wholebird» & «Pseudomonas, Crubming») , но они также могут добавлять или удалять строки по своему усмотрению.

Мне бы хотелось, чтобы при переходе пользователя на вкладку он отображал только текстовые поля, а не раскрывающиеся списки.

enter image description here

Код

Индекс 

    @Html.ActionLink("New Row...", "AddRow", null, new { id = "addItem" })
        <div id="overflw" style="height: 260px; width: 885px; overflow: auto; border: 1px solid black">
            <div id="editorRows">
                @if (Model.Micros != null)
                {
                    foreach (var item in Model.Micros)
                    {
                        Html.RenderPartial("MicroRow", item);
                    }
                }
            </div>
        </div>
   <script type="text/javascript">
        $(".deleteRow").button({ icons: { primary: "ui-icon-trash" },
            text: false
        });          
    </script>

MicroRow 

    <div class="editorRow" style="padding-left: 5px">

    @using (Html.BeginCollectionItem("micros"))
    {  
        ViewData["MicroRow_UniqueID"] = Html.GenerateUniqueID();

        @Html.EditorFor(model => model.Lab_T_ID, new { UniqueID = ViewData["MicroRow_UniqueID"] })
        @Html.EditorFor(model => model.Lab_SD_ID, new { UniqueID = ViewData["MicroRow_UniqueID"] })      
        @Html.TextBoxFor(model => model.Result)
        <input type="button" class="deleteRow" title="Delete" value="Delete" />
    }
</div>

Ответы [ 2 ]

2 голосов
/ 03 апреля 2012

Ну, самый простой способ, которым я могу придумать, - это взломать вашу клавишу tab , когда вы находитесь в одном из текстовых полей.Я поставил скрипку , которая может дать общее представление о том, что я имел в виду.

<input type='text' id='n1' data-key='1' />
<input type='text' id='n2' data-key='2' />
<input type='text' id='n5' value = 'Tab skips me'/>
<input type='text' id='n3' data-key='3' />
<input type='text' id='n4' data-key='4' />

$(function(){
    $('input[type="text"]').keydown(function(e){
        if(e.which === 9){
            e.preventDefault();
            var self = $(this), 
                myIndex = parseInt(self.data('key'),10),
                nextIndex = myIndex + 1,
                nextElement = $('input[data-key="'+ nextIndex +'"]');
            nextElement.focus();
        }
    });
});​

Редактировать - Использование TabIndexes

Хотя приведенный выше фрагмент кода работает так, как рекламируется, вы также можете проверить, используя TabIndex .Признаюсь, это то, чего я не знал, существовало.Но, прочитав комментарии, решил, что это то, что может больше соответствовать вашим требованиям.Я обновил скрипку , чтобы показать, как она работает.Проверьте это 

<input type='text' id='n1' tabindex='1' value="I'm first" />
<input type='text' id='n2' tabindex='3' value="I'm third" />
<input type='text' id='n5' value="I'm last"/>
<input type='text' id='n3' tabindex='2' value="I'm second" />
<input type='text' id='n4' tabindex='4' value="I'm fourth" />
0 голосов
/ 03 апреля 2012

Использовать скрытое поле в хранилище представлений текущее значение индекса вкладки.

Как вы отметили здесь Jquery. Добавьте код для ниже в Jquery

Каждый раз, когда пользователь нажимает на кнопку «Добавить новую строку», считывает значение скрытого полевого индекса индекса вкладки, увеличивает его и задает новое добавленное текстовое поле

Каждый раз, когда пользователь нажимает на кнопку удаления, значение индекса уменьшается.

...