<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<td><b>Вопрос</b></td>
<td>
<b>Ответ</b>
</td>
<td style="width: 325px;">
<b>Действия</b>
</td>
</tr>
</thead>
<tbody>
<tr class="MenuTableRow row-first" data-row-id="1">
<td>Вопрос 1</td>
<td>Ответ 1</td>
<th>
<a class="icon-arrow-up" title="Переместить в самый верх" href="#">Переместить в самый верх</a><br>
<a class="icon-arrow-down" title="Переместить в самый низ" href="#">Переместить в самый низ</a>
</th>
</tr>
<tr class="MenuTableRow" data-row-id="2">
<td>Вопрос 2</td>
<td>Ответ 2</td>
<th>
<a class="icon-arrow-up" title="Переместить в самый верх" href="#">Переместить в самый верх</a><br>
<a class="icon-arrow-down" title="Переместить в самый низ" href="#">Переместить в самый низ</a>
</th>
</tr>
<tr class="MenuTableRow row-last" data-row-id="3">
<td>Вопрос 3</td>
<td>Ответ 3</td>
<th>
<a class="icon-arrow-up" title="Переместить в самый верх" href="#">Переместить в самый верх</a><br>
<a class="icon-arrow-down" title="Переместить в самый низ" href="#">Переместить в самый низ</a>
</th>
</tr>
</tbody>
</table>
var MenuTableRow = {
'1':{ name:'111111',description:'3333333'},
'2':{ name:'1111111',description:'3333333'},
'3':{ name:'11111',description:'33333'}
};
var menu = new BootstrapMenu('.MenuTableRow', {
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return MenuTableRow[rowId];
},
actions: [{
name: 'Редактировать',
onClick: function(row) {
alert('Редактировать');
}
},
{
name: 'Сделать копию',
onClick: function(row) {
alert('Сделать копию');
}
},
{
name: 'Удалить',
onClick: function(row) {
alert('удалить');
}
},
{
name: 'Переместить в самый верх',
onClick: function(row) {
rowfirst();
}
},
{
name: 'Переместить в самый низ',
onClick: function(row) {
rowlast();
}
}]
});
function rowfirst(){
alert('Переместить вверх');
let line=$(this).closest('.MenuTableRow');
let tbody=$(this).closest('tbody');
line.prependTo(tbody);
let rows=$('.MenuTableRow',tbody);
rows.removeClass('row-first').removeClass('row-last');
rows.first().addClass('row-first');
rows.last().addClass('row-last');
}
function rowlast(){
alert('Переместить вниз');
let line=$(this).closest('.MenuTableRow');
let tbody=$(this).closest('tbody');
line.appendTo('tbody');
let rows=$('.MenuTableRow',tbody);
rows.removeClass('row-first').removeClass('row-last');
rows.first().addClass('row-first');
rows.last().addClass('row-last');
}
$(document).on('click', 'a', function () {
if ($(this).is(".icon-arrow-up")) {
let line=$(this).closest('.MenuTableRow');
let tbody=$(this).closest('tbody');
line.prependTo(tbody);
let rows=$('.MenuTableRow',tbody);
rows.removeClass('row-first').removeClass('row-last');
rows.first().addClass('row-first');
rows.last().addClass('row-last');
}
if ($(this).is(".icon-arrow-down")) {
let line=$(this).closest('.MenuTableRow');
let tbody=$(this).closest('tbody');
line.appendTo('tbody');
let rows=$('.MenuTableRow',tbody);
rows.removeClass('row-first').removeClass('row-last');
rows.first().addClass('row-first');
rows.last().addClass('row-last');
}
});