TableDnd(JQuery表格拖拽控件)应用进阶-白红宇

TableDnd(JQuery表格拖拽控件)应用进阶

阅读量：4077 次

发布时间：2019-05-25

本文共 810 字，大约阅读时间需要 2 分钟。

在上一篇文章中，介绍了TableDnD这个强大的控件，目前是我博客浏览次数最多的文章……现在再简单介绍一下他的应用吧：

在之前文章里介绍了，使用时很方便：

$("#table").tableDnD();

下面就介绍几个实用的选项：

1.onDragClass(onDragStyle)：拖拽时样式，我们在拖拽一个行时，为了醒目一般会给拖拽起来的行设置高亮，这个选项就可以设置在拖拽时为被拖拽的行增加的样式，拖拽结束后清除。

示例代码：

$("#table").tableDnD({    onDragClass:'highlight'});

2.onDrop：拖拽结束事件函数，在拖拽结束后我们需要做一些处理时可以定义该函数。

示例代码：

$("#table").tableDnD({    onDrop: function(){          alert('done');    }});

3.保持某一行不动：很多情况下，我们的表格是一行标题+多行数据的形式，如果直接使用tableDnD，很可能连标题行都可以被随便拖拽，或者数据行被拖拽到标题行上面去了-_-!，怎么解决这个问题呢？只需要给不能拖拽的行增加两个class：nodrop nodrag，示例代码：


   
                  ID       Content      
               1       sth.      
               2       anything

$('#table').tableDnD();

这样第一行是无法拖拽的，只能拖拽第二，三行，当然，你也可以用js为某一行增加这两个class，可以参考JQuery的addClass方法

以上已经能满足大部分对于表格拖拽的需求了，当然还有一些其他的高级选项，暂不赘述，需要的可以参考上一篇文章中的url。

转载地址：http://yasni.baihongyu.com/

你可能感兴趣的文章