Drag and Drop Rows in DataGrid(可拖放行的数据表格)

Drag and Drop Rows in DataGrid（可拖放行的数据表格）

Extension ? Drag and Drop Rows in DataGrid

扩展下载地址：http://www.jeasyui.com/extension/downloads/datagrid-dnd.zip (我发布的程序包整也有提供，在extension目录下)

导入'datagrid-dnd.js'文件


<script type="text/javascript" src="datagrid-dnd.js"></script>  
	<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">项目 ID</th>
            <th data-options="field:'productid',width:100">产品</th>
            <th data-options="field:'listprice',width:80,align:'right'">价格表</th>
            <th data-options="field:'unitcost',width:80,align:'right'">单位成本</th>
            <th data-options="field:'attr1',width:250">特性</th>
            <th data-options="field:'status',width:60,align:'center'">状态</th>
        </tr>
    </thead>
</table>
 
<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，以下是新增的事件。

事件名	参数	描述
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); // 启用第二行的拖放 $('#dg').datagrid('enableDnd'); // 启用所有行的拖放

方法名

方法参数

描述

enableDnd

index

启用拖放行功能。'index' 参数表明什么行被拖放。如果该参数未指定将启用所有行的拖放功能。

代码示例：

$('#dg').datagrid('enableDnd', 1);	// 启用第二行的拖放
$('#dg').datagrid('enableDnd');	// 启用所有行的拖放