jq實(shí)現(xiàn)左滑顯示刪除按鈕,點(diǎn)擊刪除實(shí)現(xiàn)刪除數(shù)據(jù)功能(推薦)
695
2024-02-21
現(xiàn)在很多后臺(tái)列表為了方便均使用拖拽排序的功能，對(duì)列表進(jìn)行隨意的排序。
話不多說(shuō) ，我在網(wǎng)上找了一些demo，經(jīng)過(guò)對(duì)比，現(xiàn)在把方便實(shí)用的一個(gè)demo列出來(lái)，基于jqueryUI.js
先上html代碼，很簡(jiǎn)單：
復(fù)制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryUI拖動(dòng)</title>
</head>
<script src="http://www.gimoo.net/t/1812/js/jquery-1.11.0.min.js"></script>
<script src="http://www.gimoo.net/t/1812/js/jquery-ui.min.js"></script>
<style>
tr{cursor: pointer;}
</style>
<body>
<table id="sort">
<thead>
<tr>
<th class="index">序號(hào)</th>
<th>年份</th>
<th>標(biāo)題</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr>
<td class="index">1</td>
<td>2014</td>
<td>這是第1個(gè)</td>
<td>阿斯蒂芬阿斯蒂芬</td>
</tr>
<tr>
<td class="index">2</td>
<td>2015</td>
<td>這是第2個(gè)</td>
<td>阿薩德發(fā)射點(diǎn)發(fā)歲的</td>
</tr>
<tr>
<td class="index">3</td>
<td>2016</td>
<td>這是第3個(gè)</td>
<td>阿薩德發(fā)送地方</td>
</tr>
<tr>
<td class="index">4</td>
<td>2017</td>
<td>這是第4個(gè)</td>
<td>的說(shuō)法大賽分</td>
</tr>
</tbody>
</table>
</body>
</html>
復(fù)制代碼
除了要引入jquery.js 和jqueryUI.js外，還需要如下一段代碼：
復(fù)制代碼
$(document).ready(function(){
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
});
這是我發(fā)現(xiàn)的比較實(shí)用的一個(gè)拖動(dòng)排序，還是比較方便的。
