1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
$(
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();
}
|
Jquery easyui datagrid 行的上下移动实现方式
最新推荐文章于 2021-04-24 15:36:34 发布