jQuery EasyUI 擴展 - 數據網格行拖放（Drag and Drop Rows in DataGrid）

jQuery EasyUI 擴展 jQuery EasyUI 擴展

用法

包含 'datagrid-dnd.js' 檔

<script type="text/javascript" src="datagrid-dnd.js"></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 擴展