不说废话,大牛初始亦菜鸟,成功之路贵执行,马上行动!如果想获得更优质的显示效果,请在Chrome、Firefox等现代浏览器浏览本站。

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

WebForm/MVC EricHu 1305℃ 0评论

easyui datagrid 行的上下移动实现方式需要扩展easyui,实现的方式有很多,下面给出一种方式供大家参考,查看源码

直接上代码:

$(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();
}

转载请注明:RDIFramework.NET » easyui datagrid 行的上下移动实现方式

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址