拖动表格进行行排序
在最近的项目中，我们有这样一个需求，要手动拖动html table中的行(tr)进行排序，
用的是jquery ui的sortable
HTML
需要引入jquery和jquery ui的js文件
<h1>Sorting A Table With jQuery UI</h1> <a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable with jQuery UI</a> <table id="sort" class="grid" title="Kurt Vonnegut novels"> <thead> <tr> <th class="index">No.</th> <th>Year</th> <th>Title</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td class="index">1</td> <td>1969</td> <td>Slaughterhouse-Five</td> <td>A+</td> </tr> <tr> <td class="index">2</td> <td>1952</td> <td>Player Piano</td> <td>B</td> </tr> <tr> <td class="index">3</td> <td>1963</td> <td>Cat's Cradle</td> <td>A+</td> </tr> <tr> <td class="index">4</td> <td>1973</td> <td>Breakfast of Champions</td> <td>C</td> </tr> <tr> <td class="index">5</td> <td>1965</td> <td>God Bless You, Mr. Rosewater</td> <td>A</td> </tr> </tbody> </table>
javascript:
<script>
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();
</script>
其实只需要$("#sort tbody").sortable().disableSelection();就可以了，那么那两个回调函数作用是什么呢？
helper: fixHelperModified,这个函数的作用是：克隆你正在拖动的tr，然后依次设置你克隆的那个tr的td的宽度，使之拖动时的宽度与原来一致。也就是说，不回调这个函数也可以，就是拖动的时候tr中的单元格宽度会变小。当然了不影响放手后的宽度。
stop: updateIndex，这个函数的作用是，拖动后维护现在索引（即第一列的值）。
第二种方法
<!DOCTYPE html> <!-- saved from url=(0046)http://www.testbj.com/admin.php/admin/category --> <html style="min-height: 875px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <body class="skin-blue pace-done" style="min-height: 875px;"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-body"> <table class="table table-striped table-bordered mt24"> <caption></caption> <thead> <tr> <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">分类</th> <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">0</th> <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">1</th> <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">2</th> <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">3</th> </tr> </thead> <tbody class="tcontent ui-sortable"> <tr class="rcontent" name="11" value="2" type="0"> <td rowspan="$rowspan" class="update tdsort0" name="2" style="vertical-align: middle;text-align: center;"><div> 分类一</div></td> <td rowspan="$rowspan" class="update tdsort1" attr="2" name="6" value="10" style="vertical-align: middle;text-align: center;"><div>张三1</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="2" name="4" value="9" style="vertical-align: middle;text-align: center;"><div>李四1</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="2" name="5" value="8" style="vertical-align: middle;text-align: center;"><div>王五1</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="2" name="9" value="7" style="vertical-align: middle;text-align: center;"><div>赵六1</div> </td> </tr> <tr class="rcontent" name="10" value="14" type="0"> <td rowspan="$rowspan" class="update tdsort0" name="14" style="vertical-align: middle;text-align: center;"><div> 分类二</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="14" name="16" value="11" style="vertical-align: middle;text-align: center;"><div>张三2</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="14" name="17" value="10" style="vertical-align: middle;text-align: center;"><div>李四2</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="14" name="18" value="9" style="vertical-align: middle;text-align: center;"><div>王五2</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="14" name="19" value="8" style="vertical-align: middle;text-align: center;"><div>赵六2</div> </td> </tr> <tr class="rcontent" name="9" value="27" type="0"> <td rowspan="$rowspan" class="update tdsort0" name="27" style="vertical-align: middle;text-align: center;"><div> 分类三</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="27" name="29" value="9" style="vertical-align: middle;text-align: center;"><div>张三3</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="27" name="30" value="8" style="vertical-align: middle;text-align: center;"><div>李四3</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="27" name="31" value="7" style="vertical-align: middle;text-align: center;"><div>王五3</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="27" name="32" value="6" style="vertical-align: middle;text-align: center;"><div>赵六3</div> </td> </tr> <tr class="rcontent" name="8" value="38" type="0"> <td rowspan="$rowspan" class="update tdsort0" name="38" style="vertical-align: middle;text-align: center;"><div> 分类四</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="38" name="40" value="7" style="vertical-align: middle;text-align: center;"><div>张三4</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="38" name="41" value="6" style="vertical-align: middle;text-align: center;"><div>李四4</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="38" name="42" value="5" style="vertical-align: middle;text-align: center;"><div>王五4</div> </td> <td rowspan="$rowspan" class="update tdsort1" attr="38" name="43" value="4" style="vertical-align: middle;text-align: center;"><div>赵六4</div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- jQuery 2.0.2 --> <script src="/js/jquery.min.js" type="javascript"></script> <!-- jQuery UI 1.10.3 --> <script src="/jquery-ui/jquery-ui-1.10.4/jquery-1.10.2.js" type="javascript"></script> <script type="text/javascript"> $(function() { $('.tdsort1').mousedown(function(event) { $(this).parent().sortable({cancel:function() { }}); $('.rcontent').sortable({ axis : 'x', items: "td", //只是tr可以拖动 revert : true, update : function(event, ui) { // ==== 一系列操作 ==== // alert('移动成功！'); // window.location.reload(); } }) }) $('.tdsort1').mouseup(function() { $(".tcontent").sortable("enable"); }) $(".tcontent").sortable({ cursor: "move", items: "tr", //只是tr可以拖动 opacity: 0.6, //拖动时，透明度为0.6 revert: true, //释放时，增加动画 update: function(event, ui) { //更新排序之后 // ==== 一系列操作 ==== // alert('移动成功！'); // window.location.reload(); } }); $(".tcontent").disableSelection(); }) </script> </body></html>
