easyui datagrid 行的上下移动实现方式

最新推荐文章于 2018-07-20 17:48:20 发布

小小马赛

最新推荐文章于 2018-07-20 17:48:20 发布

阅读量442

点赞数

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/wddpwzzhao123/article/details/84811851

版权

easyui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Easyui datagrid 行上下移动</title>
	<link id="others_jquery_easyui_131" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/jquery-easyui/themes/default/easyui.css">
		<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
	<script id="others_jquery_easyui_131" type="text/javascript" class="library" src="/js/sandbox/jquery-easyui/jquery.easyui.min.js"></script>
	
	</head>
	<body>
		<h1>
			Easyui datagrid 行上下移动
		</h1>
		<table id="tt"></table>
	</body>
</html>

$(function() {
	$('#tt').datagrid({
		singleSelect: false,
		url: '/uploads/rs/233/bkf2ntm7/datagrid_data2.json',
		title: 'Easyui datagrid 行上下移动',
		width: 800,
		height: 'auto',
		fitColumns: true,
		columns: [[{
			field: 'itemid',
			title: 'Item ID',
			width: 80
		},
		{
			field: 'productid',
			title: 'Product ID',
			width: 120
		},
		{
			field: 'listprice',
			title: 'List Price',
			width: 80,
			align: 'right'
		},
		{
			field: 'unitcost',
			title: 'Unit Cost',
			width: 80,
			align: 'right'
		},
		{
			field: 'attr1',
			title: 'Attribute',
			width: 250
		},
		{
			field: 'status',
			title: 'Status',
			width: 60,
			align: 'center'
		},
		{
			field: 'ctr',
			title: '操作',
			width: 100,
			align: 'center',
			formatter: function() {
				return '<button οnclick="move(event,this,true)">上</button><button  οnclick="move(event,this,false)">下</button>';
			}
		}]]
	});
});

function move(e, target, isUp) {
	var $view = $(target).closest('div.datagrid-view');
	var index = $(target).closest('tr.datagrid-row').attr('datagrid-row-index');
	var $row = $view.find('tr[datagrid-row-index=' + index + ']');

	if (isUp) {
		$row.each(function() {
			$(this).prev().before($(this));
		});
	} else {
		$row.each(function() {
			$(this).before($(this).next());
		});
	}
	$row.removeClass('datagrid-row-over');
	e.stopPropagation();
}

小小马赛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid 行的上下移动实现方式

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Easyui datagrid 行上下移动&lt;/title&gt; &
复制链接

扫一扫