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

jQuery EasyUI 扩展Extensión de jQuery EasyUI

Uso

Incluir el archivo 'treegrid-dnd.js'

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

Habilitar arrastrar y soltar

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

Eventos

Estos eventos son una extensión del treegrid (cuadrícula de árbol). A continuación se muestran los eventos añadidos para el treegrid.

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 se comienza a arrastrar una fila.
onStopDrag row Se dispara cuando se detiene 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 se encuentra 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 donde se coloca.
sourceRow: la fila de origen del arrastre.
point: indica la posición de colocación; los valores posibles son: 'append', 'top' o 'bottom'.
onDrop targetRow,sourceRow,point Se dispara cuando una fila es colocada.
targetRow: la fila de destino donde se coloca.
sourceRow: la fila de origen del arrastre.
point: indica la posición de colocación; los valores posibles son: 'append', 'top' o 'bottom'.

Métodos

Este método es una extensión del treegrid (cuadrícula de árbol).

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

Descargar ejemplos de jQuery EasyUI

jquery-easyui-treegrid-dnd.zip

jQuery EasyUI 扩展Extensión de jQuery EasyUI Otras extensiones