jQuery EasyUI Extension -TreeGrid Row Drag and Drop (Drag and Drop Rows in TreeGrid)
jQuery EasyUI Extension
Usage
Include the 'treegrid-dnd.js' file
<script type="text/javascript" src="treegrid-dnd.js.html"></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 extend from the treegrid. The following are events added for the treegrid.
| Name | Parameters | Description |
|---|---|---|
| onBeforeDrag | row | Fires before a row drag starts; return false to cancel the drag. |
| onStartDrag | row | Fires when a row drag starts. |
| onStopDrag | row | Fires after a row drag stops. |
| onDragEnter | targetRow, sourceRow | Fires when dragging a row enters an allowed target row; return false to cancel the drop. |
| onDragOver | targetRow, sourceRow | Fires when dragging a row is over an allowed target row; return false to cancel the drop. |
| onDragLeave | targetRow, sourceRow | Fires when dragging a row leaves an allowed target row. |
| onBeforeDrop | targetRow,sourceRow,point | Fires before a row is dropped; return false to cancel the drop. targetRow: the target row where the row is dropped. 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 where the row is dropped. sourceRow: the source row being dragged. point: indicates the drop position; possible values: 'append', 'top' or 'bottom'. |
Methods
This method extends from the treegrid.
| Name | Parameters | Description |
|---|---|---|
| enableDnd | id | Enable row drag and drop. The 'id' parameter indicates the row to be dragged and dropped. If the parameter is not specified, drag and drop is enabled for all rows. |
Download jQuery EasyUI Examples
jquery-easyui-treegrid-dnd.zip
jQuery EasyUI Extension Other Extensions