jQuery EasyUI Extension - Drag and Drop Rows in TreeGrid
Usage
Include '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
These events are extended from the TreeGrid and are added to the TreeGrid.
Name | Parameters | Description |
---|---|---|
onBeforeDrag | row | Triggered before a row starts dragging, returning false cancels the drag. |
onStartDrag | row | Triggered when a row starts dragging. |
onStopDrag | row | Triggered after a row stops dragging. |
onDragEnter | targetRow, sourceRow | Triggered when a dragged row enters an allowed drop target, returning false cancels the drop. |
onDragOver | targetRow, sourceRow | Triggered when a dragged row is over an allowed drop target, returning false cancels the drop. |
onDragLeave | targetRow, sourceRow | Triggered when a dragged row leaves an allowed drop target. |
onBeforeDrop | targetRow, sourceRow, point | Triggered before a row is dropped, returning false cancels the drop. <br>targetRow: The target row to drop. <br>sourceRow: The source row being dragged. <br>point: Indicates the drop position, possible values: 'append', 'top' or 'bottom'. |
onDrop | targetRow, sourceRow, point | Triggered when a row is dropped. <br>targetRow: The target row to drop. <br>sourceRow: The source row being dragged. <br>point: Indicates the drop position, possible values: 'append', 'top' or 'bottom'. |
Methods
These methods are extended from the TreeGrid.
Name | Parameters | Description |
---|---|---|
enableDnd | id | Enables drag and drop for rows. <br>'id' parameter indicates the row to be dragged and dropped. <br>If not specified, all rows can be dragged and dropped. |