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

最新推荐文章于 2021-04-24 15:36:34 发布

原创最新推荐文章于 2021-04-24 15:36:34 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #JeasyUI #ViewUI

Jquery 同时被 2 个专栏收录

3 篇文章

订阅专栏

JeasyUI

2 篇文章

订阅专栏

本文介绍如何使用EasyUI的Datagrid插件实现表格中选中行的上下移动功能。通过JavaScript操作DOM元素，实现了所选行在表格中的位置交换，并保持选择状态不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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