jQuery EasyUI-Erweiterung -TreeGrid-Zeilen-Drag-and-Drop (Zeilen in TreeGrid per Drag-and-Drop verschieben)

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung

Nutzung

Binden Sie die Datei 'treegrid-dnd.js' ein

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

Drag-and-Drop aktivieren

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

Ereignisse

Diese Ereignisse erweitern das Treegrid. Die folgenden Ereignisse wurden für das Treegrid hinzugefügt.

Name Parameters Beschreibung
onBeforeDrag row Wird ausgelöst, bevor das Ziehen einer Zeile beginnt; geben Sie false zurück, um das Ziehen abzubrechen.
onStartDrag row Wird ausgelöst, wenn das Ziehen einer Zeile beginnt.
onStopDrag row Wird ausgelöst, nachdem das Ziehen einer Zeile beendet wurde.
onDragEnter targetRow, sourceRow Wird ausgelöst, wenn eine gezogene Zeile in eine zulässige Zielzeile eintritt; return false, um das Ablegen abzubrechen.
onDragOver targetRow, sourceRow Wird ausgelöst, wenn eine gezogene Zeile sich über einer zulässigen Zielzeile befindet; return false, um das Ablegen abzubrechen.
onDragLeave targetRow, sourceRow Wird ausgelöst, wenn eine gezogene Zeile eine zulässige Zielzeile verlässt.
onBeforeDrop targetRow,sourceRow,point Wird ausgelöst, bevor eine Zeile abgelegt wird; geben Sie false zurück, um das Ablegen abzubrechen.
targetRow: die Zielzeile, auf die die Zeile abgelegt wird.
sourceRow: die Quellzeile, die gezogen wird.
point: gibt die Ablageposition an; mögliche Werte: 'append', 'top' oder 'bottom'.
onDrop targetRow,sourceRow,point Wird ausgelöst, wenn eine Zeile abgelegt wird.
targetRow: die Zielzeile, auf die die Zeile abgelegt wird.
sourceRow: die Quellzeile, die gezogen wird.
point: gibt die Ablageposition an; mögliche Werte: 'append', 'top' oder 'bottom'.

Methoden

Diese Methode erweitert das Treegrid.

Name Parameters Beschreibung
enableDnd id Zeilen-Ziehen und -Ablegen aktivieren.
Der Parameter 'id' gibt die Zeile an, die gezogen und abgelegt werden soll.
Wenn der Parameter nicht angegeben ist, ist Ziehen und Ablegen für alle Zeilen aktiviert.

jQuery EasyUI-Beispiele herunterladen

jquery-easyui-treegrid-dnd.zip

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung Weitere Erweiterungen