jQuery EasyUI Extension -DataGrid Row Drag and Drop (Drag and Drop Rows in DataGrid)
jQuery EasyUI Extension
Usage
Include the 'datagrid-dnd.js' file
<script type="text/javascript" src="datagrid-dnd.js.html"></script>
Enable drag and drop
<table class="easyui-datagrid" title="DataGrid" style="width:700px;height:250px" data-options="
singleSelect:true,
data:data,
onLoadSuccess:function(){
$(this).datagrid('enableDnd');
}
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
Events
These events extend from the datagrid. The following are events added for the datagrid.
| 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 allowable target row; return false to cancel the drop. |
| onDragOver | targetRow, sourceRow | Fires when dragging a row over an allowable target row; return false to cancel the drop. |
| onDragLeave | targetRow, sourceRow | Fires when dragging a row leaves an allowable 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: '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: 'top' or 'bottom'. |
Methods
This method extends from the datagrid.
| Name | Parameters | Description |
|---|---|---|
| enableDnd | index | Enable drag and drop of rows. The 'index' parameter indicates the row to be dragged and dropped. If this parameter is not specified, dragging and dropping applies to all rows. Code example:
$('#dg').datagrid('enableDnd', 1); // enable dragging on second row
$('#dg').datagrid('enableDnd'); // enable dragging all rows
|
Download jQuery EasyUI Examples
jquery-easyui-datagrid-dnd.zip
jQuery EasyUI Extension Other Extensions