jQuery EasyUI 擴(kuò)展 - 樹形網(wǎng)格行拖放（Drag and Drop Rows in TreeGrid）

jQuery EasyUI 擴(kuò)展

用法

包含 '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>

事件

該事件擴(kuò)展自樹形網(wǎng)格（treegrid），下面是為樹形網(wǎng)格（treegrid）添加的事件。

名稱	參數(shù)	描述
onBeforeDrag	row	當(dāng)一行的拖拽開始前觸發(fā)，返回 false 則取消拖拽。
onStartDrag	row	當(dāng)開始拖拽一行時(shí)觸發(fā)。
onStopDrag	row	當(dāng)停止拖拽一行后觸發(fā)。
onDragEnter	targetRow, sourceRow	當(dāng)拖拽一行進(jìn)入某允許放置的目標(biāo)行時(shí)觸發(fā)，返回 false 則取消放置。
onDragOver	targetRow, sourceRow	當(dāng)拖拽一行在某允許放置的目標(biāo)行上時(shí)觸發(fā)，返回 false 則取消放置。
onDragLeave	targetRow, sourceRow	當(dāng)拖拽一行離開某允許放置的目標(biāo)行時(shí)觸發(fā)。
onBeforeDrop	targetRow,sourceRow,point	當(dāng)一行被放置前觸發(fā)，返回 false 則取消放置。 targetRow：放置的目標(biāo)行。 sourceRow：拖拽的源行。 point：指示放置的位置，可能的值：'append'、'top' 或 'bottom'。
onDrop	targetRow,sourceRow,point	當(dāng)一行被放置時(shí)觸發(fā)。 targetRow：放置的目標(biāo)行。 sourceRow：拖拽的源行。 point：指示放置的位置，可能的值：'append'、'top' 或 'bottom'。

方法

該方法擴(kuò)展自樹形網(wǎng)格（treegrid）。

名稱	參數(shù)	描述
enableDnd	id	啟用行的拖拽與放置。 'id' 參數(shù)指示要被拖拽與放置的行。如果該參數(shù)未指定，則拖拽與放置所有行。

下載 jQuery EasyUI 實(shí)例

jquery-easyui-treegrid-dnd.zip

jQuery EasyUI 擴(kuò)展其他擴(kuò)展

上一篇：jQuery EasyUI 擴(kuò)展 - 數(shù)據(jù)網(wǎng)格行拖放（Drag and Drop Rows in DataGrid）下一篇：jQuery EasyUI 擴(kuò)展 - 主題（Themes）