jQuery EasyUI 拡張 -ツリーグリッド行のドラッグ＆ドロップ（Drag and Drop Rows in TreeGrid）

jQuery EasyUI 扩展jQuery EasyUI 拡張

使い方

'treegrid-dnd.js' ファイルを含めます

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

ドラッグ＆ドロップを有効にする

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

イベント

このイベントはツリグリッド（treegrid）から拡張されています。以下はツリグリッド（treegrid）に追加されたイベントです。

名前 パラメータ 説明
onBeforeDrag row 行のドラッグが開始される前に発生します。false を返すとドラッグをキャンセルします。
onStartDrag row 行のドラッグを開始したときに発生します。
onStopDrag row 行のドラッグを停止した後に発生します。
onDragEnter targetRow, sourceRow 行をドラッグしてドロップ可能なターゲット行に入ったときに発生します。false を返すとドロップをキャンセルします。
onDragOver targetRow, sourceRow 行をドラッグしてドロップ可能なターゲット行の上にあるときに発生します。false を返すとドロップをキャンセルします。
onDragLeave targetRow, sourceRow 行をドラッグしてドロップ可能なターゲット行から離れたときに発生します。
onBeforeDrop targetRow,sourceRow,point 行がドロップされる前に発生します。false を返すとドロップをキャンセルします。
targetRow：ドロップ先のターゲット行。
sourceRow：ドラッグ元のソース行。
point：ドロップ位置を示します。可能な値：'append'、'top'、'bottom'。
onDrop targetRow,sourceRow,point 行がドロップされたときに発生します。
targetRow：ドロップ先のターゲット行。
sourceRow：ドラッグ元のソース行。
point：ドロップ位置を示します。可能な値：'append'、'top'、'bottom'。

メソッド

このメソッドはツリグリッド（treegrid）から拡張されています。

名前 パラメータ 説明
enableDnd id 行のドラッグ＆ドロップを有効にします。
'id' パラメータは、ドラッグ＆ドロップされる行を示します。
このパラメータが指定されていない場合は、すべての行のドラッグ＆ドロップが有効になります。

jQuery EasyUI サンプルをダウンロード

jquery-easyui-treegrid-dnd.zip

jQuery EasyUI 扩展jQuery EasyUI 拡張 その他の拡張