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

#### 启用拖放

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

#### 拖动多个行

     $('#dg').datagrid({singleSelect: false,dragSelection: true,onLoadSuccess: function(){$(this).datagrid('enableDnd');}});

#### 属性

下列属性扩展自Datagrid，以下是新增的属性。

事件名 | 参数 | 描述 | 默认值
--- | --- | --- | ---
dropAccept | selector | 确定哪些行允许被拖拽。 | tr.datagrid-row
dragSelection | boolean | 设置为true时，拖拽所有选中的行，否则只拖拽单行。 | false

####

#### 事件

下列事件扩展自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');	// 启用所有行的拖放