EasyUI_Drag and Drop Rows in DataGrid（可拖放行的数据表格）
这个功能可以实现表格的行在列表中拖动重新排列，用户体验好那么一点点，觉得很鸡肋。
还是导入‘datagrid-dnd.js’文件
<script type=”text/javascript” src=”datagrid-dnd.js”></script>
启用拖放
<table class="easyui-datagrid" title="DataGrid" style="width:x;height:x" data-options="singleSelect:true,data:data,onLoadSuccess:function(){$(this).datagrid('enableDnd');}">
<thead>
<tr>
<th data-options=”field:’itemid’,width:>项目 ID</th>
<th data-options=”field:’productid’,width:>产品</th>
<th data-options=”field:’listprice’,width:align:’right'”>价格表</th>
<th data-options=”field:’unitcost’,width:align:’right'”>单位成本</th>
<th data-options=”field:’attr,width:>特性</th>
<th data-options=”field:’status’,width:align:’center'”>状态</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拒绝释放。 |
| onDrop |
targetRow,sourceRow,point |
在行被释放的时候触发。 |
方法
下列方法扩展自Datagrid，以下是新增的方法。
|
方法名 |
方法参数 |
描述 |
|
enableDnd |
index |
启用拖放行功能。‘index’ 参数表明什么行被拖放。如果该参数未指定将启用所有行的拖放功能。 代码示例： $(‘#dg’).datagrid(‘enableDnd’, 1); // 启用第二行的拖放 $(‘#dg’).datagrid(‘enableDnd’); // 启用所有行的拖放 |
声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 嗅谱网
转载请注明：转自《EasyUI_Drag and Drop Rows in DataGrid（可拖放行的数据表格）》
本文地址：http://www.xiupu.net/archives-2638.html
关注公众号：
微信赞赏
支付宝赞赏
鲁公网安备 37011302000391号