YouTipjQuery EasyUI Extension - Drag and Drop Rows in TreeGrid
Usage
Include the 'treegrid-dnd.js' file.
<script type="text/javascript" src="treegrid-dnd.js"></script>Enable Drag and Drop
<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>Events
This event extends the treegrid. The following events are added to the treegrid.
| Name | Parameters | Description |
|---|---|---|
| onBeforeDrag | row | Fires before the drag of a row starts. Return false to cancel the drag. |
| onStartDrag | row | Fires when the drag of a row starts. |
| onStopDrag | row | Fires after the drag of a row stops. |
| onDragEnter | targetRow, sourceRow | Fires when a dragged row enters a valid drop target row. Return false to cancel the drop. |
| onDragOver | targetRow, sourceRow | Fires when a dragged row is over a valid drop target row. Return false to cancel the drop. |
| onDragLeave | targetRow, sourceRow | Fires when a dragged row leaves a valid drop target row. |
| onBeforeDrop | targetRow, sourceRow, point | Fires before a row is dropped. Return false to cancel the drop.targetRow: The target row for the drop.sourceRow: The source row being dragged.point: Indicates the drop position. Possible values: 'append', 'top', or 'bottom'. |
| onDrop | targetRow, sourceRow, point | Fires when a row is dropped.targetRow: The target row for the drop.sourceRow: The source row being dragged.point: Indicates the drop position. Possible values: 'append', 'top', or 'bottom'. |
Methods
This method extends the treegrid.
| Name | Parameters | Description |
|---|---|---|
| enableDnd | id | Enable drag and drop for rows. The id parameter indicates the row to be dragged and dropped.If this parameter is not specified, all rows are enabled for drag and drop. |