Easyui datagrid 实现表格记录拖拽

简介: Easyui datagrid 实现表格记录拖拽

datagrid 实现表格记录拖拽


 

测试环境

jquery-easyui-1.5.3

 

jquery-easyui-datagrid-dnd

下载地址:

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

 

实现

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

//(function($){

//})(jQuery);

 

关键代码

引入js文件

 

定义表格,添加事件onBeforeDragonDrop

 

事件:

事件            参数                          描述

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

 

onDrop         targetRow,sourceRow,point   当一行被放置时触发。

targetRow:放置的目标行。

sourceRow:拖拽的源行。

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

 

 


   

   

       data-options="border:false,

       ……

       onBeforeDrag:onBeforeDrag,

       onDrop:function(targetRow,sourceRow, point, datagridID){

           onDropForTestCaseStep(targetRow, sourceRow, point, 'API_test_case_step');

       }">

       ……


……

 



 

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

目录
相关文章
|
1月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
20 2
|
1月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
28 0
|
1月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
1月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
|
1月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
|
7月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
7月前
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
|
7月前
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
|
7月前
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决

热门文章

最新文章