轻松实现HTML表格拖拽和排序，实现复杂交互式数据表

轻松实现HTML表格拖拽和排序，实现复杂交互式数据表变得更简单

绍

我们都知道普通的HTML自带的功能相对有限，很多复杂的交互式场景，如果手动去写功能的话会非常的复杂，而且可扩展性差，就拿HTML表格来说，对于初学者或者对于复杂的拖拽式交互编程不熟悉的话会很浪费时间，因此今天就介绍一个第三方的插件——Table-draagger，来轻松实现类似的功能。Table-draagger是用于构建可重排序的拖放表的极简主义纯Javascript库！

Github

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);
});

你可以在不设置任何参数的情况下使用默认的拖拽和排序方式，当然以下是你可以配置的选项：

options.mode

1、将mode设置为column，用户拖动和排序表的列

2、将mode设置为row，用户拖动并排序表的行

3、设置mode为free，用户根据点击后鼠标移动的方向拖动行或列。注意，必须在自由模式下指定dragHandler。

options.dragHandler

dragHandler是表中的拖动句柄选择器默认情况下，在列模式下，dragHandler是表的第一行；在行模式下，则是第一列。

options.onlyBody

在行模式下将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小时内与您取得联系。

整合营销服务商

轻松实现HTML表格拖拽和排序，实现复杂交互式数据表

绍

Github

特征

安装使用

总结

您的项目需求