Tenho uma tabela que tem a opção para reordenar, caso aja necessidade
Carregamento | Gênero | Quantidade | Inicia | Finaliza | Proprietário 1 | Novilha | 30 | 1 | 30 | Popeye
2 | Boi | 30 | 31 | 60 | Ligeirinho 3 | Boi | 10 | 61 | 70 | Simpsons
3 | Vaca | 10 | 71 | 80 | Simpsons
3 | Novilha | 10 | 81 | 90 | Simpsons
Consegui fazer a tabela reordenar caso necessário, no exemplo o carregamento 1 para a ordem do 2º carregamento, pois tem somente uma linha, olha exemplo abaixo
1 | Boi | 30 | 1 | 30 | Ligeirinho 2 | Novilha | 30 | 31 | 60 | Popeye 3 | Boi | 10 | 61 | 70 | Simpsons
3 | Vaca | 10 | 71 | 80 | Simpsons
3 | Novilha | 10 | 81 | 90 | Simpsons
Se caso queira alterar a ordem de carregamento 3 que tem 03 linhas para o 01 Carregamento só vai uma a linha selecionada, e neste caso tem que ir as 03 linhas deste carregamento
1 | Boi | 10 | 1 | 10 | Simpsons 2 | Boi | 30 | 21 | 40 | Ligeirinho 3 | Novilha | 30 | 41 | 70 | Popeye 4 | Vaca | 10 | 71 | 80 | Simpsons
5 | Novilha | 10 | 81 | 90 | Simpsons
O que aconteceu acima não pode ocorrer pois o carregamento ficou separado.
Gostaria de saber como fazer o Javascript ( AJAX ) fazer esta validação.
Abaixo segue exemplo que fiz em HTML e Javascript
JAVASCRIPT (AJAX)
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script>
$(document).ready(function () {
$("#sortable").sortable({
update: function (event, ui) {
var itemIds = "";
$("#sortable").find(".taskSingleInLine").each(function () {
var itemId = $(this).attr("data-taskid");
itemIds = itemIds + itemId + ",";
});
$.ajax({
url: '@Url.Action("UpdateItem", "Lotes")',
data: { itemIds: itemIds },
type: 'POST',
success: function (data) {
},
error: function (xhr, status, error) {
}
});
}
});
});
</script>
HTML
<table class="table">
<thead>
<tr>
<th>Carregamento</th><th>Gênero</th><th>Quantidade</th><th>Inicia</th><th>Finaliza</th><th>Proprietário</th>
</tr>
</thead>
<tbody id="sortable" style="cursor:pointer">
<tr>
<td>1</td><td>Boi</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
</tr>
<tr>
<td>2</td><td>Boi</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
</tr>
<tr>
<td>3</td><td>Novilha</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
</tr>
<tr>
<td>3</td><td>Vaca</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
</tr>
<tr>
<td>3</td><td>Boi</td><td>10</td><td>1</td><td>10</td><td class="taskSingleInLine" id="task@(itemLoteGenero.GeneroId)" data-taskid="@(itemLoteGenero.GeneroId)">Simpsons</td>
</tr>
</tbody>
</table>