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. leetcode-数组中只出现一次的数字

    一.版本1—有序数组中只出现一次的数字 1.题目描述 给定一个只包含整数的有序数组,每个元素都会出现两次,唯有一个数只会出现一次,找出这个数. 示例 1: 输入: [1,1,2,3,3,4,4,8,8 ...

  2. [Swift]LeetCode161. 一次编辑距离 $ One Edit Distance

    Given two strings S and T, determine if they are both one edit distance apart. 给定两个字符串S和T,确定它们是否都是是一 ...

  3. python 抓取糗事百科糗图

    1 首先看下要抓取的页面 这是糗事百科里面的糗图页面,每一页里面有很多的图片,我们要做的就是把这些图片抓取下来. 2 分析网页源代码 发现源代码里面的每张图是这样储存的,所以决定使用正则匹配出图片的u ...

  4. Redis面试题

    1.谈谈Redis的主从复制流程 有几个重点:主节点负责写,从节点负责读,slave node 主要用来进行横向扩容,做读写分离,扩容的 slave node 可以提高读的吞吐量.必须开启 maste ...

  5. 9.Django form组件

    Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 创建Form类时,主要涉及到 [ ...

  6. BBS论坛（二十三）

    23.添加板块 (1)apps/models class BoardModel(db.Model): __tablename__ = 'board' id = db.Column(db.Integer ...

  7. iterm2 快捷键（转载）

    Mac 下 iterm2 的快捷键,转自:https://github.com/sumiaowen/iterm2-shortcuts iterm2-shortcuts(iterm 2 快捷键) 标签 ...

  8. 前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮

    一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高 ...

  9. Chapter 5 Blood Type——2

    The rest of the morning passed in a blur. 早上剩下的时间都在模糊中度过了. It was difficult to believe that I hadn't ...

  10. C#3.0 Lamdba表达式与表达式树

    Lamdba表达式与表达式树 Lamdba表达式 C#2.0中的匿名方法使得创建委托变得简单起来,甚至想不到还有什么方式可以更加的简化,而C#3.0中的lamdba则给了我们答案. lamdba的行为 ...