Extension jQuery EasyUI -Glisser-déposer des lignes du DataGrid (Glisser-déposer des lignes dans le DataGrid)

jQuery EasyUI 扩展Extension jQuery EasyUI

Utilisation

Inclure le fichier 'datagrid-dnd.js'

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

Activer le glisser-déposer

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

Événements

Ces événements étendent ceux du datagrid. Les événements suivants ont été ajoutés pour le datagrid.

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'un glisser de ligne entre dans une ligne cible autorisée ; renvoyez false pour annuler le dépôt.
onDragOver targetRow, sourceRow Se déclenche lorsqu'un glisser de ligne passe au-dessus d'une ligne cible autorisée ; renvoyez false pour annuler le dépôt.
onDragLeave targetRow, sourceRow Se déclenche lorsqu'un glisser de ligne 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 pour le dépôt.
sourceRow: La ligne source en cours de glissement.
point: Indique la position de dépôt. Valeurs possibles : 'top' ou 'bottom'.
onDrop targetRow,sourceRow,point Se déclenche lorsqu'une ligne est déposée.
targetRow: La ligne cible pour le dépôt.
sourceRow: La ligne source en cours de glissement.
point: Indique la position de dépôt. Valeurs possibles : 'top' ou 'bottom'.

Méthodes

Cette méthode est une extension du datagrid.

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

Exemple de code :

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

Télécharger les exemples jQuery EasyUI

jquery-easyui-datagrid-dnd.zip

jQuery EasyUI 扩展Extension jQuery EasyUI Autres extensions