jQuery EasyUI Extensión -Arrastrar y soltar filas de DataGrid (Drag and Drop Rows in DataGrid)

jQuery EasyUI 扩展jQuery EasyUI Extensión

Uso

Incluir el archivo 'datagrid-dnd.js'

<script type="text/javascript" src="datagrid-dnd.js.html"></script>

Habilitar arrastrar y soltar

    <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>

Eventos

Estos eventos se extienden desde DataGrid; a continuación se muestran los eventos agregados para DataGrid.

Nombre Parámetros Descripción
onBeforeDrag row Se dispara antes de que comience el arrastre de una fila; devolver false cancela el arrastre.
onStartDrag row Se dispara cuando comienza el arrastre de una fila.
onStopDrag row Se dispara después de detener el arrastre de una fila.
onDragEnter targetRow, sourceRow Se dispara cuando una fila arrastrada entra en una fila de destino permitida; devolver false cancela la colocación.
onDragOver targetRow, sourceRow Se dispara cuando una fila arrastrada está sobre una fila de destino permitida; devolver false cancela la colocación.
onDragLeave targetRow, sourceRow Se dispara cuando una fila arrastrada sale de una fila de destino permitida.
onBeforeDrop targetRow,sourceRow,point Se dispara antes de que una fila sea colocada; devolver false cancela la colocación.
targetRow: la fila de destino de la colocación.
sourceRow: la fila de origen del arrastre.
point: indica la posición de colocación; valores posibles: 'top' o 'bottom'.
onDrop targetRow,sourceRow,point Se dispara cuando una fila es colocada.
targetRow: la fila de destino de la colocación.
sourceRow: la fila de origen del arrastre.
point: indica la posición de colocación; valores posibles: 'top' o 'bottom'.

Métodos

Este método se extiende desde DataGrid.

Nombre Parámetros Descripción
enableDnd index Habilitar el arrastre y la colocación de filas.
El parámetro 'index' indica la fila que se va a arrastrar y colocar.
Si no se especifica este parámetro, se arrastran y colocan todas las filas.

Ejemplo de código:

$('#dg').datagrid('enableDnd', 1);    // enable dragging on second row
$('#dg').datagrid('enableDnd');    // enable dragging all rows

Descargar ejemplos de jQuery EasyUI

jquery-easyui-datagrid-dnd.zip

jQuery EasyUI 扩展jQuery EasyUI Extensión Otras extensiones