欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Easyui datagrid 实现表格记录拖拽

程序员文章站 2022-07-04 17:47:21
datagrid 实现表格记录拖拽 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 jquery-easyui-datagrid-dnd 下载地址: http://www.jeasyui.net/demo/193.html 实现 编辑datagrid-dnd ......

datagrid 实现表格记录拖拽

by:授客 qq:1033553122

 

测试环境

jquery-easyui-1.5.3

 

jquery-easyui-datagrid-dnd

下载地址:

 

实现

编辑datagrid-dnd.js,注释头尾两行代码,如下

//(function($){

//})(jquery);

 

关键代码

引入js文件

<script type="text/javascript" src="website/js/datagrid-dnd.js"></script>

 

定义表格,添加事件onbeforedragondrop

 

事件:

事件            参数                          描述

onbeforedrag row                          当一行的拖拽开始前触发,返回 false 则取消拖拽。

 

ondrop         targetrow,sourcerow,point   当一行被放置时触发。

targetrow:放置的目标行。

sourcerow:拖拽的源行。

point:指示放置的位置,可能的值:'top' 或 'bottom'。

 

 

<body>

    <!--项目配置名称列表-->

    <table class="easyui-datagrid" rownumbers="true" pagination="true" id="api_test_case_step"

        data-options="border:false,

        ……

        onbeforedrag:onbeforedrag,

        ondrop:function(targetrow,sourcerow, point, datagridid){

            ondropfortestcasestep(targetrow, sourcerow, point, 'api_test_case_step');

        }">

        ……

</table>

……

 

</body>

</html>

 

js函数实现

// 正在编辑时,禁止拖拽

function onbeforedrag(row) {

if (editindex != undefined) {

        // 处于正在编辑状态,取消拖拽

        return false;

    }

}

 

// 停止拖拽,释放鼠标,提交目标行,被拖拽行,拖拽方向灯相关数据到服务器

function ondropfortestcasestep(targetrow, sourcerow, point, datagridid) {

    var targetrowid = targetrow.id;

    var targetroworder = targetrow.order;

 

    var sourcerowid = sourcerow.id;

    var sourceroworder = sourcerow.order;

    console.log(sourcerow);

 

    var caseid = sourcerow.case_id;

    var idselector = '#' + datagridid;

 

    $.post('/action/dragrowoftestcasestep ', {targetrowid:targetrowid, targetroworder:targetroworder, sourcerowid:sourcerowid, sourceroworder:sourceroworder, direction:point, datagridid:datagridid, caseid:caseid},

        function(data, status){

            if (data == 'success') {

                $.messager.alert('提示', '保存成功', 'info');

            } else {

                $.messager.alert('错误', '保存失败: ' + data, 'error');

            }

        }

    );

    onloadsuccess();

 

    $(idselector).datagrid('reload');

 

}

 

后台函数实现

使用django代码实现,如下,需要注意的是,不管是哪个拖拽方向分top or bottom,都需要考虑拖拽到目标行记录上方及目标行记录上方。

def drag_row_of_testplan_case_view(request):

    try:

        params = request.post

        class_name = params['datagridid']

        db_class = globals()[class_name]

        plan_id = params['planid']

 

        # target_row_id = params['targetrowid']

        target_row_order = params['targetroworder']

 

        source_row_id = params['sourcerowid']

        source_row_order = params['sourceroworder']

 

        direction = params['direction']

 

 

        with transaction.atomic():

 

            if direction == 'top':

                if source_row_order > target_row_order:  # 从下往上拖动,拖动至目标行记录上方     # target_row_order <= order < source_row_order 的记录,order + 1

                    db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gte=target_row_order).filter(order__lt=source_row_order).update(order=f('order') + 1)

 

                    source_row = db_class.objects.get(id=source_row_id)

                    source_row.order = target_row_order

                    source_row.save()

                else:   # 从上往下拖动,拖动至目标行记录上方    # source_row_order < order < target_row_order 的记录,order - 1

                    db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gt=source_row_order).filter(order__lt=target_row_order).update(order=f('order') - 1)

 

                    source_row = db_class.objects.get(id=source_row_id)

                    source_row.order = int(target_row_order) - 1

                    source_row.save()

            elif direction == 'bottom':

                if source_row_order > target_row_order: # 从下往上拖动,拖动至目标行记录下方    # target_row_order < order < source_row_order 的记录,order + 1

                    db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gt=target_row_order).filter(order__lt=source_row_order).update(order=f('order') + 1)

 

                    source_row = db_class.objects.get(id=source_row_id)

                    source_row.order = int(target_row_order) + 1

                    source_row.save()

                else:  # 从上往下拖动,拖动至目标行记录下方     # source_row_order < order <= target_row_order 的记录,order - 1

                    db_class.objects.filter(plan_id=plan_id, sub_node_num=0).filter(order__gt=source_row_order).filter(order__lte=target_row_order).update(order=f('order') - 1)

 

                    source_row = db_class.objects.get(id=source_row_id)

                    source_row.order = target_row_order

                    source_row.save()

 

        return httpresponse('success')

    except exception as e:

        return httpresponse('%s' % e)

 

参考链接:

http://www.jeasyui.net/extension/193.html