我有Z像这样的表:
id | data | order |
----+--------+--------
31 | a | 0 |
32 | b | 1 |
33 | c | 2 |
,我使用table-dragger.min.js
设置头寸行以更新订单。如何创建更新查询以使用Ajax更新订单
var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.move',
onlyBody: true,
animation: 300
});
dragger.on('drop', function() {
arr = [];
tbl = $('table tbody > tr');
tbl.each(function(index) {
arr[index] = this.id;
});
$('textarea').text(arr)
});
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
text-align: center;
}
th:nth-child(1) {
width: 50px;
}
th:nth-child(2) {
width: 200px;
}
.move:hover {
cursor: pointer
}
textarea {
width: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/sindu12jun/table-dragger/master/dist/table-dragger.min.js"></script>
<table id="table">
<thead>
<tr>
<th>no</th>
<th>col</th>
</tr>
</thead>
<tbody>
<tr id="31">
<td class="move"> id 31</td>
<td class="move">a</td>
</tr>
<tr id="32">
<td class="move">id 32</td>
<td class="move">b</td>
</tr>
<tr id="33">
<td class="move">id 33</td>
<td class="move">c</td>
</tr>
</tbody>
</table>
<br>
index after move position by row id
<br>
<textarea></textarea>