报表拖拽控件 jquery

场景：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，示例代码：

<table id="table">
<tr class='nodrop nodrag'>
   <td>ID</td><td>Content</td>
</tr>
<tr>
    <td>1</td><td>sth.</td>
</tr>
<tr>
    <td>2</td><td>anything</td>
</tr>
<table>

 

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

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

 

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