К счастью, поскольку вы ссылались на рабочий пример, я смог изучить код.Кстати, вы можете сделать это, просто открыв инструменты разработчика в вашем браузере.Я использую Chrome, так что для меня это просто F12.В исходном коде я обнаружил следующее:
$('#user .editable').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.editable');
if($('#autoopen').is(':checked')) {
setTimeout(function() {
$next.editable('show');
}, 300);
} else {
$next.focus();
}
}
});
Код читается почти как на английском, поэтому, я думаю, за ним довольно легко следовать.Когда редактор закрыт, мы сначала проверяем причину его закрытия.Затем код находит следующее поле и открывает редактор, если установлен флажок «автоматически открывать следующее текстовое поле».Здесь интересно видеть, что это делается с тайм-аутом вместо простого вызова $next.editable('show'); Это может быть важно или просто для галочки.
В вашем коде вы захотите найти какой-нибудь объединяющий селектордля ваших вещей.Я думаю, что самый простой способ сделать это - просто добавить .editable к исходному источнику и назвать его так, как они делают в демоверсии.
Итак, для вашего HTML:
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="editable task" data-type="text">001</td>
<td data-name="Item" class="editable Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="editable task" data-type="text">002</td>
<td data-name="Item" class="editable Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
Обратите внимание на добавленный класс на тегах td.(РЕДАКТИРОВАТЬ: сумасшедший, не заметил, что уже был атрибут класса)
Затем вы можете эмулировать код демонстрационной js, но будьте осторожны, потому что переменная $next не может быть выбрана таким же образом.Ваш DOM-макет не совпадает, так как у вас есть более одной редактируемой ячейки в строке:
$('#table .editable').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).nextAll().find('.editable');
if ($next.length > 0) {
$next = $next[0];
} else {
$next = $(this).closest('tr').next().find('.editable');
if ($next.length > 0) {
$next = $next[0];
} else {
return; // No editable fields remaining.
}
}
setTimeout(function() { $next.editable('show'); }, 300);
}
});
Я должен отрицать, что я не проверял выше, но это должно дать вам хорошую отправную точку для получениясобирается.Выбор следующего поля, вероятно, можно сделать намного лучше, чем у меня, но у меня просто нет среды тестирования, чтобы проверить это правильно.
РЕДАКТИРОВАТЬ : I 'Мы заметили, что в perhapse вы хотите перейти только к полю выбора, но не обязательно от выбора к элементу в следующей строке.В этом случае код будет немного проще.
Во-первых, вам не нужен класс editable, поэтому вы можете просто использовать HTML-код, который у вас уже есть, но в js вынужно правильно обращаться к селекторам:
$('#table .task').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).nextAll().find('.Item');
setTimeout(function() { $next.editable('show'); }, 300);
}
});
И это должно быть.Когда редактор выбора закрывается, следующее поле не будет выбрано автоматически.