jqurey学习碎片-0002-jquery表格拖拽排序
2017-12-16 16:50
459 查看
如下代码:
<!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 style="text-align: center;">序号</th>
<th style="text-align: center;">名称</th>
<th style="text-align: center;">类型代码</th>
<th style="text-align: center;">含义</th>
<th style="text-align: center;">是否显示</th>
<th style="text-align: center;">操作</th>
</tr>
</thead>
<tbody>
<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();
<!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 style="text-align: center;">序号</th>
<th style="text-align: center;">名称</th>
<th style="text-align: center;">类型代码</th>
<th style="text-align: center;">含义</th>
<th style="text-align: center;">是否显示</th>
<th style="text-align: center;">操作</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();
相关文章推荐
- jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽,按列排序,并可以保存排序后的结果
- jquery实现表格拖拽排序
- jqurey学习碎片-0001-jquery初识入门
- JavaScript学习笔记(1)——一个表格排序的例子
- jquery.tableSort.js表格排序插件使用方法详解
- jQuery liger ui ligerGrid 打造通用的分页排序查询表格
- jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
- jQuery学习总结四 --- 功能性表格的开发
- 简单的jquery拖拽排序效果
- jquery tablesorter.js 支持中文表格排序改进
- jquery实现鼠标拖拽排序功能
- jquery学习笔记1表格颜色交叉展示
- jquery表格排序
- jquery 表格排序、实时搜索表格内容(附图)
- javascript 学习笔记之表格排序
- 简单的jquery拖拽排序效果实现代码
- jQuery学习之:jqGrid表格插件——从servlet获得数据
- JavaScript学习笔记9--表格排序
- 带你学习JQuery:表格处理
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动