Tengo el siguiente código donde edito el campo de una fila en una tabla, pero quiero que este sea mas didactico, es decir, al momento de editar un campo este salte al siguiente campo donde voy a editar. Tengo una function de success donde deberia saltar al siguiente campo para editar que seria el Item
, pero nose porque no funciona.
$('#TablaDespachos').editable({
container: 'body',
selector: 'td.pedido',
title: 'pedido',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Este campo es necesario';
}
},
success: function(response) {
// $('#TablaDespachos tbody .editable').on('hidden', function(e, reason) {
//
// var $next = $(this).closest('tr>td').next().find('.Clasificacion');
// setTimeout(function() {
// $next.editable('show');
// }, 300);
// });
}
});
var Item = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
Item.push({
value: k,
text: v
});
});
$('#TablaDespachos').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: Item,
validate: function(value) {
if ($.trim(value) == '') {
return 'Este campo es necesario';
}
}
});
<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="TablaDespachos" class="table table-bordered">
<thead>
<tr id="EncabDespachos">
<th>Id</th>
<th>Pedido</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="pedido" class="pedido" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="pedido" class="pedido" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
He visto un ejemplo en la siguiente pagina. LINK debes presionar el checkbox auto-open next field
al momento de editar este salta al siguiente campo para editar. Me gustaria algo asi, espero haberme explicado bien.