html表格列拖动插件,TableDnd(JQuery报表拖拽控件)应用进阶

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

在上一篇文章一个很好用的JQuery Table拖拽控件

中，介绍了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。