继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jqurey学习碎片-0002-jquery表格拖拽排序

慕用4979188
关注TA
已关注
手记 266
粉丝 63
获赞 531

如下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 排序(Sortable) - 默认功能</title>
<link rel="stylesheet" href="../csscool/css/jquery-ui.min.css">
<script src="../csscool/js/jquery.min.js"></script>
<script src="../csscool/js/jquery-ui.min.js"></script>

<style>
#sortable1 { list-style-type: none; margin: 0; padding: 0; width: 40%;float: left; }
#sortable1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable1 li span { position: absolute; margin-left: -1.3em; }

#sortable2 { list-style-type: none; margin: 0; padding: 0; width: 40%; float: left; }
#sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable2 li span { position: absolute; margin-left: -1.3em; }
#tablesort{width: 500px;}

#tablesort tr{background: #ccc;}
#tablesort td{width: 20%;}
</style>
<script>
$(function() {
$( "#sortable tbody" ).sortable();
$( "#sortable tbody" ).disableSelection();
$( "#sortable1" ).sortable();
$( "#sortable1" ).disableSelection();
$( "#sortable2" ).sortable();
$( "#sortable2" ).disableSelection();
});
</script>
</head>
<body>
<form action="">

<ul id="sortable1">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<ul id="sortable2">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<div id="tablesort">
<table class="table table-striped table-bordered table-hover" id="sortable">
<thead>
<tr>
<th >序号</th>
<th >名称</th>
<th >类型代码</th>
<th >含义</th>
<th >是否显示</th>
<th >操作</th>
</tr>
</thead>
<tbody>

    <tr class="item" aid="1" id="1" sort="1">        <td>1</td>        <td>1</td>        <td>1</td>        <td>1</td>        <td>显示</td>        <td><button class="btn btn-primary edit" tid="1">修改</button></td>    </tr>

<tr class="item" aid="2" id="2" sort="2">
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>显示</td>
<td><button class="btn btn-primary edit" tid="2">修改</button></td>
</tr>
<tr class="item" aid="3" id="3" sort="3">
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>显示</td>
<td><button class="btn btn-primary edit" tid="3">修改</button></td>
</tr>
</tbody>
</table>
</div>
</form>

</body>
</html>

需要注意的问题:
1、文件的调用  
<link rel="stylesheet" href="../csscool/css/jquery-ui.min.css">
<script src="../csscool/js/jquery.min.js"></script>
<script src="../csscool/js/jquery-ui.min.js"></script>
2、对DOM元素的操作:
$( "#sortable tbody" ).sortable();
$( "#sortable tbody" ).disableSelection();

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP