datagrid 实现表格记录拖拽

by:授客 QQ：1033553122

测试环境

jquery-easyui-1.5.3

jquery-easyui-datagrid-dnd

下载地址：

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

实现

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

//(function($){

//})(jQuery);

关键代码

引入js文件

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

定义表格，添加事件onBeforeDrag，onDrop

事件：

事件            参数                          描述

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

Easyui datagrid 实现表格记录拖拽的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  3. EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

    原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...

  4. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  5. jquery easyui DataGrid 数据表格 属性

    用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_d ...

  6. 关于easyui Datagrid一些样式记录

    此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图!!!! 一丶存在选中框的时候标题栏合并显示序号字段. 代码展示: onLoadSuccess: function (data ...

  7. Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS

    Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...

  8. 【easyui】关于easyui Datagrid一些样式记录

    此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图!!!! 一丶存在选中框的时候标题栏合并显示序号字段. 代码展示: onLoadSuccess: function (data ...

  9. easyui datagrid 列拖拽

    首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...

随机推荐

  1. 最小化JIT示例(仅限Intel x86+Windows)

    #include <Windows.h> #include <cstdint> #include <cstring> #define BACK_FILL (0) i ...

  2. [Swift]LeetCode112. 路径总和 | Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  3. [Swift]LeetCode206. 反转链表 | Reverse Linked List

    Reverse a singly linked list. Example: Input: 1->2->3->4->5->NULL Output: 5->4-> ...

  4. [Swift]LeetCode753. 破解保险箱 | Cracking the Safe

    There is a box protected by a password. The password is n digits, where each letter can be one of th ...

  5. [Swift]LeetCode766. 托普利茨矩阵 | Toeplitz Matrix

    A matrix is Toeplitz if every diagonal from top-left to bottom-right has the same element. Now given ...

  6. [Swift]LeetCode888. 公平的糖果交换 | Fair Candy Swap

    Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy that Ali ...

  7. [Swift]LeetCode963. 最小面积矩形 II | Minimum Area Rectangle II

    Given a set of points in the xy-plane, determine the minimum area of any rectangle formed from these ...

  8. vs2013+opencv3.2配置

    opencv库在3.0以后分为opencv库和opencv_contrib库两部分,其中opencv_contrib库是一个扩展库,如果需要使用SIFT和SURF算法就需要安装这个扩展库,否则只用安装 ...

  9. Eclipse debug Source not found

    点击打开链接最近开始慢慢转向idea开发了,但是因为旧项目是在eclipse里面.就没有在idea导入,所以旧项目就用eclipse,新项目就用idea.然而最近几天eclipse似乎不干了,每次de ...

  10. Python内置函数(25)——getattr

    英文文档: getattr(object, name[, default]) Return the value of the named attribute of object. name must ...