可拖放行的数据表格

扩展组件 » 可拖放行的数据表格

包括 '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继承而来，下面是datagrid的属性。

名称	类型	描述	默认
dropAccept	selector	确定哪些可拖动行为将被接受。	tr.datagrid-row
dragDelay	number	定义启动拖动操作的延迟时间(以毫秒为单位)。	100
dragSelection	boolean	当true时,拖动选中的行时，否则拖动currenct单行。	false

事件

这些事件是从datagrid继承而来的，下面是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:源行。点:指示下拉操作，可选值为: 'top' or 'bottom'.
onDrop	targetRow,sourceRow,point	当一行被删除时触发。targetRow:要删除的行。sourceRow:源行。点:指示下拉操作，可选值为: 'top' or 'bottom'.

方法

下面的方法继承自datagrid

名称	参数	描述
enableDnd	index	启用拖放行。“index”参数指示拖放哪一行。如果没有指定此参数，则启用拖放所有行. 代码实例: $('#dg').datagrid('enableDnd', 1); // enable dragging on second row $('#dg').datagrid('enableDnd'); // enable dragging all rows

下载EasyUI扩展: