Динамический стол - авто-шоу
У меня есть следующий код, в котором я редактирую поле строки в таблице, но я хочу, чтобы он был более динамичным, то есть при редактировании поля он переходит к следующему полю, где я буду редактировать. У меня есть функция успеха, в которой я должен перейти к следующему полю, чтобы отредактировать, каким должен быть элемент, но я не знаю, почему это не работает.
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
$(this).parent().find(".Item").click();
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});<link href = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<script src = "http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel = "stylesheet"/>
<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 = "task" data-type = "text">001</td>
<td data-name = "Item" class = "Item" data-type = "select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name = "task" class = "task" data-type = "text">002</td>
<td data-name = "Item" class = "Item" data-type = "select">Item1</td>
</tr>
</tbody>
</table>Я видел пример на следующей странице. ссылка вы должны установить флажок автоматически открывать следующее поле в момент редактирования этого перехода к следующему полю для редактирования. Я бы хотел что-то подобное, надеюсь, я хорошо объяснил.
ОБНОВЛЕНИЕ: я добавляю строку кода в свою функцию успеха, но выбор дает ошибку Error when loading list, а в таблице создает новый <tr> with <td>
@acmsohail Если я изменю задачу, я хочу перейти к выбранному элементу
поменять задачу, вы имеете в виду, щелкнуть tab должен на поле item?
в success: function(response) автоматически перейти к полю выбора
Пожалуйста, проверьте мой ответ. Надеюсь, это вам поможет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//CODE TO JUMP TO THE SELECT
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
$('#table .task').on('hidden', function(e, reason){
if (reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.task');
setTimeout(function() {
$next.editable('show');
}, 300);
}
});
$('#table .Item').on('hidden', function(e, reason){
if (reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.Item');
setTimeout(function() {
$next.editable('show');
}, 300);
}
});<link href = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<script src = "http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel = "stylesheet"/>
<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 = "task" data-type = "text">001</td>
<td data-name = "Item" class = "Item" data-type = "select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name = "task" class = "task" data-type = "text">002</td>
<td data-name = "Item" class = "Item" data-type = "select">Item1</td>
</tr>
</tbody>
</table>не переходит в поле выбора, переходит к tr идентификатора
Что вы имеете в виду под выбранным полем?
$ (это) .parent (). find ('. Item'). editable ('show'); попробуйте это и проверьте
К счастью, поскольку вы связались с рабочим примером, я смог изучить код. Кстати, вы можете сделать это, просто открыв инструменты разработчика в своем браузере. Я использую 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);
}
});
Я должен заявить, что не тестировал вышеизложенное, но это должно дать вам хорошую отправную точку для начала. Выбор следующего поля, вероятно, можно сделать намного лучше, чем то, что есть у меня, но у меня просто нет среды тестирования, чтобы проверить это должным образом.
РЕДАКТИРОВАТЬ: Я заметил, что, возможно, вы хотите перейти только к полю выбора, но не обязательно от выбора к элементу в следующей строке. В этом случае код немного проще.
Во-первых, нет необходимости в классе 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);
}
});
Так и должно быть. Когда редактор в выбранном закрывается, следующее поле не будет выбрано автоматически.
Уф, я как-то упустил тот факт, что у вас нет флажка, который был в демо. Вот что происходит, когда у вас нет тестовой среды. В любом случае, я думаю, что все должно работать.
Я добавляю эту строку кода в свою функцию успеха $(this).parent().find(".Item").editable('toggle');, но список дает ошибку в списке отображения
проверьте мой фрагмент Error when loading list
Я только что поменял $(this).parent().find(".Item").editable('toggle'); на $(this).parent().find(".Item").click();
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
$(this).parent().find(".Item").click();
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});<link href = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<script src = "http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel = "stylesheet"/>
<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 = "task" data-type = "text">001</td>
<td data-name = "Item" class = "Item" data-type = "select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name = "task" class = "task" data-type = "text">002</td>
<td data-name = "Item" class = "Item" data-type = "select">Item1</td>
</tr>
</tbody>
</table>Я думаю, что ваша ошибка появляется, потому что нет значения по умолчанию, сначала попробуйте изменить элемент, а затем измените текст в своем фрагменте
Пожалуйста, попробуйте еще раз. Это вам поможет :)
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//CODE TO JUMP TO THE SELECT
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
$('#table .task').on('hidden', function(e, reason) {
if (reason === 'save' || reason === 'nochange') {
$(this).parent().find(".Item").click();
}
});<link href = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<script src = "http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel = "stylesheet" />
<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 = "task" data-type = "text">001</td>
<td data-name = "Item" class = "Item" data-type = "select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name = "task" class = "task" data-type = "text">002</td>
<td data-name = "Item" class = "Item" data-type = "select">Item1</td>
</tr>
</tbody>
</table>
Когда я запускаю код, он работает нормально, нет? в чем проблема?