整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們都知道普通的HTML自帶的功能相對有限，很多復雜的交互式場景，如果手動去寫功能的話會非常的復雜，而且可擴展性差，就拿HTML表格來說，對于初學者或者對于復雜的拖拽式交互編程不熟悉的話會很浪費時間，因此今天就介紹一個第三方的插件——Table-draagger，來輕松實現類似的功能。Table-draagger是用于構建可重排序的拖放表的極簡主義純Javascript庫！
https://github.com/sindu12jun/table-dragger
Table-draagger因為其以下幾個特征而讓拖拽和排序的實現變得如此簡單：
可以在npm上獲得它：
npm install table-dragger --save
或者引用壓縮的js文件
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
或者嘗試開發中的不穩定版本
npm install table-dragger@next --save
請看以下代碼：
import tableDragger from 'table-dragger' tableDragger(el, options?)
<table id="table"> <thead> <tr> <th class='handle'>header1</th> <th class='handle'>header2</th> </tr> </thead> <tbody> <tr> <td>conten1</td> <td>conten2</td> </tr> </tbody> </table>
var el=document.getElementById('table');
var dragger=tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});
你可以在不設置任何參數的情況下使用默認的拖拽和排序方式，當然以下是你可以配置的選項：
1、將mode設置為column，用戶拖動和排序表的列
2、將mode設置為row，用戶拖動并排序表的行
3、設置mode為free，用戶根據點擊后鼠標移動的方向拖動行或列。注意，必須在自由模式下指定dragHandler。
dragHandler是表中的拖動句柄選擇器默認情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。
在行模式下將onlyBody設置為true時，用戶只能在tbody中提升行。
下面是返回對象的API
tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', ()=> {
console.log('drag');
})
.on('drop', (from, to, el, mode)=> {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode)=> {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode)=> {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});
Table-draagger為我們節省了很多手動封裝表格排序和拖拽功能的時間，當然目前很多第三方框架已經實現了類似的功能，這更適用于原生的html表格，你還可以通過一些手段記憶用戶拖拽，這只是其中一種思路，Enjoy it！~
格(行)排序:
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function (){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
var arr=[];
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i]; //將表格行元素集合轉換為數組
}
arr.sort(function (tr1, tr2){ //自定義排序函數
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for(var i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>appendChild()方法理解:
target.appendChild(newnode)
1.先把元素從原有父級上刪掉
2.添加到新的父級
i列表排序
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function (){
var oUl1=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
var aLi=oUl1.getElementsByTagName('li');
//aLi.sort(); 此方法不可行,因為aLi是元素集合,不是數組,sort()只能用于數組排序
var arr=[];
for(var i=0;i<aLi.length;i++){
arr[i]=aLi[i]; //aLi元素集合轉換為數組
}
arr.sort(function (li1, li2){ //自定義排序函數
var n1=parseInt(li1.innerHTML); //將字符串轉換為整數
var n2=parseInt(li2.innerHTML);
return n1-n2;
});
//alert(arr[0].innerHTML);
for(var i=0;i<arr.length;i++){
//alert('該把'+arr[i].innerHTML+'插入到最后');
oUl1.appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>appendChild()方法理解:
target.appendChild(newnode)
1.先把元素從原有父級上刪掉
2.添加到原有的父級元素下, 起到了移動子元素的作用。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
