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
作者:授客
微信/QQ:1033553122
全国软件测试QQ交流群:7156436
Git地址:https://gitee.com/ishouke
友情提示:限于时间仓促,文中可能存在错误,欢迎指正、评论!
作者五行缺钱,如果觉得文章对您有帮助,请扫描下边的二维码打赏作者,金额随意,您的支持将是我继续创作的源动力,打赏后如有任何疑问,请联系我!!!
微信打赏
支付宝打赏 全国软件测试交流QQ群
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库