### Drag and Drop Rows in TreeGrid（可拖放的树形表格） [Extension](http://www.jeasyui.com/extension/index.php) ? Drag and Drop Rows in TreeGrid **扩展下载地址：**[**http://www.jeasyui.com/extension/downloads/treegrid-dnd.zip**](http://www.jeasyui.com/extension/downloads/treegrid-dnd.zip)** ****(我发布的程序包整也有提供，在extension目录下)**  #### 导入'treegrid-dnd.js'文件 ~~~ <script type="text/javascript" src="treegrid-dnd.js"></script>   <script type="text/javascript" src="treegrid-dnd.js"></script> ~~~ #### 启用拖放 ~~~ <table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"        data-options="            data: data,            rownumbers: true,            idField: 'id',            treeField: 'name',            onLoadSuccess: function(row){                $(this).treegrid('enableDnd', row?row.id:null);            }        ">    <thead>        <tr>            <th data-options="field:'name'" width="220">Name</th>            <th data-options="field:'size'" width="150" align="right">Size</th>            <th data-options="field:'date'" width="200">Modified Date</th>        </tr>    </thead></table>  1.<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px" 2. data-options=" 3. data: data, 4. rownumbers: true, 5. idField: 'id', 6. treeField: 'name', 7. onLoadSuccess: function(row){ 8. $(this).treegrid('enableDnd', row?row.id:null); 9. } 10. "> 11. <thead> 12. <tr> 13. <th data-options="field:'name'" width="220">Name</th> 14. <th data-options="field:'size'" width="150" align="right">Size</th> 15. <th data-options="field:'date'" width="200">Modified Date</th> 16. </tr> 17. </thead> 18.</table> ~~~ #### 事件 下列事件扩展自Treegrid，以下是新增的事件。 <table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onBeforeDrag</td> <td>row</td> <td>在行开始拖动之前触发，返回false拒绝拖动。 </td></tr><tr><td>onStartDrag</td> <td>row</td> <td>在开始拖动行的时候触发。 </td></tr><tr><td>onStopDrag</td> <td>row</td> <td>在停止拖动行的时候触发。 </td></tr><tr><td>onDragEnter</td> <td>targetRow, sourceRow</td> <td>在行被拖动到目标行内触发，返回false拒绝拖动。</td></tr><tr><td>onDragOver</td> <td>targetRow, sourceRow</td> <td>在行悬停在目标行内时触发，返回false拒绝拖动。 </td></tr><tr><td>onDragLeave</td> <td>targetRow, sourceRow</td> <td>在行被拖动到目标行内触发。</td></tr><tr><td>onBeforeDrop</td> <td>targetRow,sourceRow,point</td> <td>在行被释放前触发，返回false拒绝释放。<br/>targetRow：要释放的目标行。<br/>sourceRow：被拖动的原始行。<br/>point： 指明拖放操作，可用值有：'top','bottom'。 </td></tr><tr><td>onDrop</td> <td>targetRow,sourceRow,point</td> <td>在行被释放的时候触发。<br/>targetRow：要释放的目标行。<br/>sourceRow：被拖动的原始行。<br/>point：指明拖放操作，可用值有：'top','bottom'。  </td></tr></tbody></table> #### 方法 下列方法扩展自Treegrid，以下是新增的方法。 | **方法名** | **方法参数** | **描述** | |-----|-----|-----| | enableDnd | id | 启用拖放行功能。'id' 参数表明什么行被拖放。如果该参数未指定将启用所有行的拖放功能。 |