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

jQuery EasyUI 扩展jQuery EasyUI 拡張

使い方

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

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

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

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

イベント

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

名前 パラメータ 説明
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：ドロップ位置を示します。可能な値：'top' または 'bottom'。
onDrop targetRow,sourceRow,point ある行がドロップされたときにトリガーされます。
targetRow：ドロップ先の対象行。
sourceRow：ドラッグ元の行。
point：ドロップ位置を示します。可能な値：'top' または 'bottom'。

メソッド

このメソッドはデータグリッド（datagrid）から拡張されています。

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

コード例：

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

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

jquery-easyui-datagrid-dnd.zip

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