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' 参数表明什么行被拖放。如果该参数未指定将启用所有行的拖放功能。 |
