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. [Swift]LeetCode92. 反转链表 II | Reverse Linked List II

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  2. Docker for windows : 安装linux

    一.Linux 1.拉取镜像 docker pull hub.c..com/library/oraclelinux:latest 2.创建linux容器 C:\Users\K-Jso>docke ...

  3. JVM内存知识备忘

    又是一篇备忘... 主要记录一些知识,进行一些资源的汇总. 先来群里liufor大大提供的两张图,清晰易懂: Dockerized Java https://www.youtube.com/watch ...

  4. SpringMVC+JWT+Swagger UI+RestFul

    前言: 其实很早就想写这篇文章了,因为我觉得这会对很多新手有指引作用,当初自己也是瞎子过河的摸索着过来的.目前后台开发比较流行的MVC框架中使用Spring MVC还是比较多的,当然还有Spring ...

  5. C# 使用 HttpClient 调用 WebService 提示 NoSOAPAction

    问题 在自行构造 HttpClient 请求 SOAP 接口之后,返回 500 错误,并且提示 NoSOAPAction 信息. 原因 造成这个问题的主要原因是因为缺少了 SOAPAction 标头, ...

  6. ActionMQ集群部署

    ActiveMQ集群部署 一.应用场景 消息中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题.实现高性能,高可用,可伸缩和最终一致性架构.是大型分布式系统不可缺少的中间件.目 ...

  7. Chorme浏览器渲染MathJax时出现竖线的解决方法

    Chorme浏览器渲染MathJax时出现竖线的原因分析与解决方法 查资料知,Chorme中显示MathJax时出现竖线的原因如下: 新版的Chorme浏览器在解析css时,会对其中的值进行向上取整( ...

  8. Lucene 03 - 什么是分词器 + 使用IK中文分词器

    目录 1 分词器概述 1.1 分词器简介 1.2 分词器的使用 1.3 中文分词器 1.3.1 中文分词器简介 1.3.2 Lucene提供的中文分词器 1.3.3 第三方中文分词器 2 IK分词器的 ...

  9. 使用mpvue开发小程序教程（五）

    在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法.在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁.条理清楚.各司 ...

  10. vim配置python编程环境及YouCompleteMe的安装教程

    python号称人工智能语言,现在可算大热,这篇博客将介绍如何用vim打造一款自己专属的python编程环境. step1 由于安装YouCompleteMe需要vim8.0及以上版本,所以得安装使用 ...