使用jQuery实现列表排序功能
2017-11-02 · 百度知道合伙人官方认证企业
育知同创教育
jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。
话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js
先上html代码，很简单：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>jqueryUI拖动</title></head><script src="js/jquery-1.11.0.min.js"></script><script src="js/jquery-ui.min.js"></script><style>
tr{cursor: pointer;}</style><body><table id="sort">
<thead>
<tr>
<th class="index">序号</th>
<th>年份</th>
<th>标题</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr>
<td class="index">1</td>
<td>2014</td>
<td>这是第1个</td>
<td>阿斯蒂芬阿斯蒂芬</td>
</tr>
<tr>
<td class="index">2</td>
<td>2015</td>
<td>这是第2个</td>
<td>阿萨德发射点发岁的</td>
</tr>
<tr>
<td class="index">3</td>
<td>2016</td>
<td>这是第3个</td>
<td>阿萨德发送地方</td>
</tr>
<tr>
<td class="index">4</td>
<td>2017</td>
<td>这是第4个</td>
<td>的说法大赛分</td>
</tr>
</tbody></table></body></html>
除了要引入jquery.js 和jqueryUI.js外，还需要如下一段代码：
$(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();
});
这是我发现的比较实用的一个拖动排序，还是比较方便的。
