<!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 onclick="move(event,this,true)">上</button><button onclick="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();
}