EasyUI DataGrid列表组件中使用dnd插件实现行拖拽

EasyUI 09/20 阅读 942 views次 人气 0
摘要:

使用DataGrid列表组件展现业务数据时,表格中显示的列表数据顺序不能够随意的去调整。但在实际的项目开发中扔有需求,需要对表格中的业务数据的行进行手动排序。

针对这样的需求,我们有3种实现方案:

1、表格中的数据行加入排序字段,通过手动输入排序号来调整显示顺序。这种方法可行,就是不太科学。

2、表格中的数据行显示下上箭头,通过点击箭头来调整显示顺序。这种方法也可行,效率比较低。

3、在表格中加入拖拽(Drag and Drop)事件,通过拖拽表格来调整显示顺序。效率较高,实现较为复杂。


还好,EasyUI为我们提供了dnd插件,实现了列表组件中的拖拽(Drag and Drop),JS为:datagrid-dnd.js

下载地址:http://www.what21.com/a/pan/js.bin_easyui.html

需要引入:

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

实现代码:

<h1>DataGrid Table Rows Drag and Drop</h1>
<!-- DataGrid -->
<table id="DataGrid" width="100%" class="easyui-datagrid" toolbar="#dutyUserTool" style="overflow:hidden"
	pagination="true" rownumbers="true" fitColumns="false" singleSelect="false"
	data-options="fit:false, border:true, pageSize:15,pageList:[10,15,20,50]">
</table>
<input type="button" value="拖拽信息" onclick="showInfo();"/>
<!--DND操作代码 -->
<script type="text/javascript">
	var source = '';
	var target = '';
	$('#DataGrid').datagrid({ 
		data:data,
		queryParams: { },
		loadMsg: '数据加载中......',
		columns:[[
			{field:'id',title:'<b>ID</b>',width:'10%',align:'left'},
			{field:'name',title:'<b>名称</b>',width:'15%',align:'left'},
			{field:'listprice',title:'<b>价格</b>',width:'10%',align:'left'},
			{field:'unitcost',title:'<b>类型</b>',width:'15%',align:'left'},
			{field:'attr1',title:'<b>属性</b>',width:'18%',align:'left'},
			{field:'status',title:'<b>状态</b>',width:'31%',align:'center'}
		]],
		onLoadSuccess:function(){
			$(this).datagrid('enableDnd');
		},
		onDrop:function(targetRow, sourceRow,point){
			source = sourceRow['id'];
			target = targetRow['id'];
			showRows();
			return true;
		}
	}); 
	
	// 显示拖拽信息
	function showInfo(){
		alert("起始行:" + source);
		alert("终止行:" + target);
	}
	
	// 显示行信息
	function showRows(){
		var rows = $("#DataGrid").datagrid("getRows"); 
		var arr = new Array(rows.length);
		for(var i=0;i<rows.length;i++) {
			var row = rows[i];
			arr[i] = row['id'];
		}
		alert(arr.join('\r\n'))
	}
</script>


效果截图:

EasyUI DataGrid列表组件中使用dnd插件实现行拖拽效果.png

将datagrid中的第1行拖至第8行。


关于dnd插件的说明:

扩展自数据网格(datagrid)的方法:

enableDnd()->

参数:index,标识要被拖拽与放置的行,如果该参数未指定,则拖拽与放置所有行。

调用:$('#dg').datagrid('enableDnd', 1);  $('#dg').datagrid('enableDnd');

扩展自数据网格(datagrid)的事件函数:

onBeforeDrag()->

参数:row(行)->

功能:当一行的拖拽开始前触发,返回 false 则取消拖拽。

onStartDrag()->

参数:row(行)->

功能:当开始拖拽一行时触发。

onStopDrag()->

参数:row(行)

功能:当停止拖拽一行后触发。

onDragEnter()->

参数:targetRow(目标行)、sourceRow(源行)

功能:当拖拽一行进入某允许放置的目标行时触发,返回 false 则取消放置。

onDragOver()->

参数:targetRow(目标行)、sourceRow(源行)

功能:当拖拽一行在某允许放置的目标行上时触发,返回 false 则取消放置。

onDragLeave()->

参数:targetRow(目标行)、sourceRow(源行)

功能:当拖拽一行离开某允许放置的目标行时触发。

onBeforeDrop()->

参数:targetRow(目标行)、sourceRow(源行)、point(指示放置的位置,可能的值:'top' 或 'bottom')

功能:targetRow,sourceRow,point 当一行被放置前触发,返回 false 则取消放置。


实现需求的总结说明:

DataGrid列表组件实现了前台的展示的拖拽功能,如果需要和后台同步,就需要使用事件(这里用onDrop)触发来记录每行的位置,使用ajax提交到后台保存,当DataGrid再次加载业务数据时就仍然可以达到排序的目的。


评论

该文章不支持评论!

分享到: