Easyui datagrid 实现表格记录拖拽
datagrid 实现表格记录拖拽
by:授客 qq：1033553122
测试环境
jquery-easyui-1.5.3
jquery-easyui-datagrid-dnd
下载地址：
实现
编辑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
上一篇： 批量保存云盘链接的deom
下一篇： Django 系列博客（十四）
推荐阅读
-
BootStrap table实现表格行拖拽效果
-
完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
-
用easyui实现查询条件的后端传递并自动刷新表格的两种方法
-
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
-
BootStrap table实现表格行拖拽效果
-
Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
-
基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）
-
使用bootstraptable插件实现表格记录的查询、分页、排序操作
-
EasyUI的可拖拽组件代码实现教程
-
sortable+element 实现表格行拖拽的方法示例