Easyui datagrid 实现表格记录拖拽
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 实现表格记录拖拽的更多相关文章
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- EasyUI datagrid数据表格的函数getData返回来的是什么
EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...
- EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他
原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- jquery easyui DataGrid 数据表格 属性
用法 1. <table id="tt"></table> 1. $('#tt').datagrid({ 2. url:'datagrid_d ...
- 关于easyui Datagrid一些样式记录
此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图!!!! 一丶存在选中框的时候标题栏合并显示序号字段. 代码展示: onLoadSuccess: function (data ...
- Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS
Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...
- 【easyui】关于easyui Datagrid一些样式记录
此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图!!!! 一丶存在选中框的时候标题栏合并显示序号字段. 代码展示: onLoadSuccess: function (data ...
- easyui datagrid 列拖拽
首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...
随机推荐
- 树的简介及Java实现
一.树的基本知识 树是一种数据结构,它是由n(n>=1)个有限结点组成一个具有层次关系的集合.把它叫做“树”是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的.它具有以下的特点:每个结 ...
- PHP_DOC php文档结构及注解浏览
项目中的PHP文件比较多,为了方便查看,使用PHP写了个小工具,可查看PHP文件的所有类.函数 和特定注释. 显示PHP文件的 Class 和 Function 显示 /// 开头的注解 显示 /// ...
- [Swift]LeetCode317. 建筑物的最短距离 $ Shortest Distance from All Buildings
You want to build a house on an empty land which reaches all buildings in the shortest amount of dis ...
- [Swift]LeetCode325. 最大子数组之和为k $ Maximum Size Subarray Sum Equals k
Given an array nums and a target value k, find the maximum length of a subarray that sums to k. If t ...
- [Swift]LeetCode581. 最短无序连续子数组 | Shortest Unsorted Continuous Subarray
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- scala的break和continue
scala 是没有 continue 的,但是包含 break,可以用 break 构造出 continue 的效果 这里用到了库: import scala.util.control.Breaks. ...
- Vue轻松入门,一起学起来！
我们创建一个项目,这个项目我们细说Vue. 一.如何在项目中添加模块 我们通过npm 进行 安装 模块. 首先我们通过cmd.exe cd进入你的项目根目录,必须存在package.json文件,安装 ...
- localStorage之本地储存
一.定义json var employees = [{ "firstName":"Bill" , "lastName":"Gate ...
- I-think-3
一段很有哲理的话,与大家分享一下: 时光匆匆, 有些东西很重要,有些东西不重要, 有些东西已经不再重要,有些东西还是很重要. 宏观地看待人生,大学文凭只是一种达到目标的途径,而并非是唯一. 主要坚定自 ...