Extension jQuery EasyUI -Glisser-déposer de lignes dans TreeGrid (Glisser-déposer des lignes dans TreeGrid)

jQuery EasyUI 扩展Extension jQuery EasyUI

Utilisation

Incluez le fichier 'treegrid-dnd.js'

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

Activer le glisser-déposer

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

Événements

Ces événements étendent le treegrid. Les suivants sont des événements ajoutés pour le treegrid.

Name Parameters Description
onBeforeDrag row Se déclenche avant le début d'un glisser de ligne ; renvoyez false pour annuler le glisser.
onStartDrag row Se déclenche lorsqu'un glisser de ligne commence.
onStopDrag row Se déclenche après l'arrêt d'un glisser de ligne.
onDragEnter targetRow, sourceRow Se déclenche lorsqu'une ligne en cours de glissement entre dans une ligne cible autorisée ; renvoyez false pour annuler le dépôt.
onDragOver targetRow, sourceRow Se déclenche lorsqu'une ligne en cours de glissement se trouve au-dessus d'une ligne cible autorisée ; renvoyez false pour annuler le dépôt.
onDragLeave targetRow, sourceRow Se déclenche lorsqu'une ligne en cours de glissement quitte une ligne cible autorisée.
onBeforeDrop targetRow,sourceRow,point Se déclenche avant qu'une ligne ne soit déposée ; retournez false pour annuler le dépôt.
targetRow : la ligne cible où la ligne est déposée.
sourceRow : la ligne source en cours de glissement.
point : indique la position de dépôt ; valeurs possibles : 'append', 'top' ou 'bottom'.
onDrop targetRow,sourceRow,point Se déclenche lorsqu'une ligne est déposée.
targetRow : la ligne cible où la ligne est déposée.
sourceRow : la ligne source en cours de glissement.
point : indique la position de dépôt ; valeurs possibles : 'append', 'top' ou 'bottom'.

Méthodes

Cette méthode étend le treegrid.

Name Parameters Description
enableDnd id Activer le glisser-déposer des lignes.
Le paramètre 'id' indique la ligne à glisser-déposer.
Si le paramètre n'est pas spécifié, le glisser-déposer est activé pour toutes les lignes.

Télécharger les exemples jQuery EasyUI

jquery-easyui-treegrid-dnd.zip

jQuery EasyUI 扩展Extension jQuery EasyUI Autres extensions