针对后台列表table拖拽比较实用的jquery拖动排序
Posted 山涧清泉
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了针对后台列表table拖拽比较实用的jquery拖动排序相关的知识,希望对你有一定的参考价值。
<!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();
});
以上是关于针对后台列表table拖拽比较实用的jquery拖动排序的主要内容,如果未能解决你的问题,请参考以下文章