### Drag and Drop Rows in TreeGrid（可拖放的树形表格）

Extension > Drag and Drop Rows in TreeGrid

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

#### 导入'treegrid-dnd.js'文件

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

#### 启用拖放

    <table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"data-options="data: data,rownumbers: true,idField: 'id',treeField: 'name',onLoadSuccess: function(row){$(this).treegrid('enableDnd', row?row.id:null);}"><thead><tr><th data-options="field:'name'" width="220">Name</th><th data-options="field:'size'" width="150" align="right">Size</th><th data-options="field:'date'" width="200">Modified Date</th></tr></thead></table>

#### 属性

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

事件名 | 参数 | 描述 | 默认值
--- | --- | --- | ---
dropAccept | selector | 确定哪些行允许被拖拽。 | tr[node-id]

####

#### 事件

下列事件扩展自Treegrid，以下是新增的事件。

事件名 | 参数 | 描述
--- | --- | ---
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'。

#### 方法

下列方法扩展自Treegrid，以下是新增的方法。

方法名 | 方法参数 | 描述
--- | --- | ---
enableDnd | id | 启用拖放行功能。'id' 参数表明什么行被拖放。如果该参数未指定将启用所有行的拖放功能。