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

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung

Nutzung

Die Datei 'datagrid-dnd.js' einbinden

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

Drag-and-Drop aktivieren

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

Ereignisse

Diese Ereignisse sind Erweiterungen des datagrid. Die folgenden Ereignisse wurden für das datagrid 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; geben Sie false zurück, um das Ablegen abzubrechen.
onDragOver targetRow, sourceRow Wird ausgelöst, wenn eine Zeile über eine zulässige Zielzeile gezogen wird; geben Sie false zurück, 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 für das Ablegen.
sourceRow: Die Quellzeile, die gezogen wird.
point: Gibt die Ablegeposition an. Mögliche Werte: 'top' oder 'bottom'.
onDrop targetRow,sourceRow,point Wird ausgelöst, wenn eine Zeile abgelegt wird.
targetRow: Die Zielzeile für das Ablegen.
sourceRow: Die Quellzeile, die gezogen wird.
point: Gibt die Ablegeposition an. Mögliche Werte: 'top' oder 'bottom'.

Methoden

Diese Methode erweitert das datagrid.

Name Parameters Beschreibung
enableDnd index Aktiviert Drag-and-Drop für Zeilen.
Der Parameter 'index' gibt die Zeile an, die gezogen und abgelegt werden soll.
Wenn dieser Parameter nicht angegeben ist, gilt Drag-and-Drop für alle Zeilen.

Codebeispiel:

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

jQuery EasyUI-Beispiele herunterladen

jquery-easyui-datagrid-dnd.zip

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung Weitere Erweiterungen