`

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

JqueryJeasyUI 
阅读更多
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();
}
分享到：
| Spring3.X @注解返回乱码解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics