Drag and Drop JQuery plugin

以上插件可對table進行排序，拖動！

例如有下面一個樣子的id為table的表格：

<table?id="table"?cellspacing="0"?cellpadding="2">
????<tr?id="1"><td>1</td><td>One</td><td>some?text</td></tr>
????<tr?id="2"><td>2</td><td>Two</td><td>some?text</td></tr>
????<tr?id="3"><td>3</td><td>Three</td><td>some?text</td></tr>
????<tr?id="4"><td>4</td><td>Four</td><td>some?text</td></tr>
????<tr?id="5"><td>5</td><td>Five</td><td>some?text</td></tr>
????<tr?id="6"><td>6</td><td>Six</td><td>some?text</td></tr>
</table>

-使用此方法需先引入jquery.js文件

-

如此，則能輕松對表格進行排序！

如果需要將排序完成后表格的row id輸出排序后的數組，則使用如下方法：

$('#table').tableDnD({
????????onDrop:?function(table,?row)?{
????????????alert($.tableDnD.serialize());
????????}
????});

而我在用這個的時候，并不是用的它的排序結果，而是自己手寫了一個遍歷表格后，取出每一行的id的代碼片段。
這段小代碼很簡單，如下：

????????$(document).ready(function()?{

????????????$("#table").tableDnD({
????????????????//當拖動排序完成后
????????????????onDrop:?function()?{
????????????????????//獲取id為table的元素
????????????????????var?table?=?document.getElementById("table");
????????????????????//獲取table元素所包含的tr元素集合
????????????????????var?tr?=?table.getElementsByTagName("tr");
????????????????????//遍歷所有的tr
????????????????????for?(var?i?=?0;?i?<?tr.length;?i++)?{
????????????????????????//獲取拖動排序結束后新表格中，row?id的結果
????????????????????????var?rowid?=?tr[i].getAttribute("id");
????????????????????????alert(rowid);
????????????????????}
????????????????}
????????????});
????????????
????????});

,zuihou 最后給出這個表格拖動排序的demo。

沒有任何技術含量，別人寫的插件，僅僅是插件應用的簡單介紹而已。讓您賤笑了。

JavaScript HTML

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<title>JavaScript表格拖動排序</title>
????<script?src="js/jquery.js"?type="text/javascript"></script>
????<script?src="js/tablednd.js"?type="text/javascript"></script>
????<script?type="text/javascript">

????????$(document).ready(function()?{

????????????$("#table").tableDnD({
????????????????//當拖動排序完成后
????????????????onDrop:?function()?{
????????????????????//獲取id為table的元素
????????????????????var?table?=?document.getElementById("table");
????????????????????//獲取table元素所包含的tr元素集合
????????????????????var?tr?=?table.getElementsByTagName("tr");
????????????????????//遍歷所有的tr
????????????????????for?(var?i?=?0;?i?<?tr.length;?i++)?{
????????????????????????//獲取拖動排序結束后新表格中，row?id的結果
????????????????????????var?rowid?=?tr[i].getAttribute("id");
????????????????????????alert("排序完成后表格的第?"?+?(i+1)?+?"?行id為?:?"?+?rowid);
????????????????????}
????????????????}
????????????});

????????});

????
????</script>
</head>
<body>

用鼠標移動TR
<br/>

<div?style="?margin:100px;">

????<table?id="table"?width="600"?border="0">

????????????<tr?id="row_1"??style="width:600px;?height:20px;?background-color:Olive;">
????????????????<td?style="">1</td>
????????????????<td>parentElement</td>
????????????????<td>moveRow?1</td>
????????????????<td>parentElement</td>
????????????</tr>
????????????<tr?id="row_2"??style="?width:600px;height:20px;?background-color:Green;">
????????????????<td?style="?">2</td>
????????????????<td>parentElement</td>
????????????????<td>moveRow?2</td>
????????????????<td>parentElement</td>
????????????</tr>
????????????<tr?id="row_3"??style="width:600px;?height:20px;?background-color:Gray;">
????????????????<td?style="?">3</td>
????????????????<td>parentElement</td>
????????????????<td>moveRow?3</td>
????????????????<td>parentElement</td>
????????????</tr>
????????????<tr?id="row_4"??style="?width:600px;?height:20px;background-color:Red;">
????????????????<td?style="?">4</td>
????????????????<td>parentElement</td>
????????????????<td>moveRow?4</td>
????????????????<td>parentElement</td>
????????????</tr>
????????????<tr?id="row_5"??style="width:600px;??height:20px;background-color:#ccc;">
????????????????<td?style="">5</td>
????????????????<td>parentElement</td>
????????????????<td>moveRow?5</td>
????????????????<td>parentElement</td>
????????????</tr>

????</table>
????
????</div>
????
</body>
</html>

轉載于:https://www.cnblogs.com/didi/archive/2010/03/22/1691663.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/276142.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/276142.shtml
英文地址，請注明出處：http://en.pswp.cn/news/276142.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！