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)添加的事件。

名称参数描述
onBeforeDragrow当一行的拖拽开始前触发,返回 false 则取消拖拽。
onStartDragrow当开始拖拽一行时触发。
onStopDragrow当停止拖拽一行后触发。
onDragEntertargetRow, sourceRow当拖拽一行进入某允许放置的目标行时触发,返回 false 则取消放置。
onDragOvertargetRow, sourceRow当拖拽一行在某允许放置的目标行上时触发,返回 false 则取消放置。
onDragLeavetargetRow, sourceRow当拖拽一行离开某允许放置的目标行时触发。
onBeforeDroptargetRow,sourceRow,point当一行被放置前触发,返回 false 则取消放置。
targetRow:放置的目标行。
sourceRow:拖拽的源行。
point:指示放置的位置,可能的值:'top' 或 'bottom'。
onDroptargetRow,sourceRow,point当一行被放置时触发。
targetRow:放置的目标行。
sourceRow:拖拽的源行。
point:指示放置的位置,可能的值:'top' 或 'bottom'。

方法

该方法扩展自数据网格(datagrid)。

名称参数描述
enableDndindex启用行的拖拽与放置。
'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 扩展