EasyUI-datagrid-行上下移动

EasyUI提供了很多行操作方法(行更新:updateRow,行末追加:appendRow,行插入:insertRow,行删除:deleteRow),通过这些方法的组合可以实现多种上下移动的效果。下面是通过删除、插入操作实现上下移动,然后通过getChanges方法获取删除和插入的数据行,并保存到数据库。

一、通过getRows()方法验证是否移动到顶行或末行

var rows=$('#dg').datagrid('getRows');
var rowlength=rows.length;

二、获取选择行的索引号
var selectrow=$('#dg').datagrid('getSelected');
var rowIndex=$('#dg').datagrid('getRowIndex', selectrow);

三、上移

if(rowIndex==0){
		$.messager.alert('提示', '顶行无法上移!', 'warning');
	}else{
		$('#dg').datagrid('deleteRow', rowIndex);//删除一行
		rowIndex--;
		$('#dg').datagrid('insertRow', {
			index:rowIndex,
			row:selectrow
		});
		$('#dg').datagrid('selectRow', rowIndex);
	}

四、下移

if(rowIndex==rowlength-1){
		$.messager.alert('提示', '底行无法下移!', 'warning');
	}else{
		$('#dg').datagrid('deleteRow', rowIndex);//删除一行
		rowIndex++;
		$('#dg').datagrid('insertRow', {
			index:rowIndex,
			row:selectrow
		});
		$('#dg').datagrid('selectRow', rowIndex);
	}


你可能感兴趣的:(EasyUI入门)