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>

定义表格,添加事件onBeforeDragonDrop

事件:

事件            参数                          描述

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

原文地址:https://www.cnblogs.com/shouke/p/10294082.html

时间: 2024-10-07 07:08:12

Easyui datagrid 实现表格记录拖拽的相关文章

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

jquery easyui DataGrid 数据表格 属性

中文帮助请点这里:中文属性详解 以下为未完结版 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head>

EasyUI DataGrid onBeforeRender 使用记录

有时候会想在视图渲染之前修改表格数据,比如说:sex属性为"1"时,页面显示"男":"0"时页面则显示为"女". 那么我们知道,DataGrid 在onLoadSuccess时已经对页面渲染完毕,此时则无法对数据再进行修改,所以API又提供了 onBeforeRender 这个事件. 使用示例: 1.将此段代码附加在DataGrid初始化后执行,即可完成在DataGrid渲染之前进行操作 $('#grid').datagrid

android开发游记:SpringView 下拉刷新的高效解决方案,定制你自己风格的拖拽页面

关于下拉刷新/上拉加载更多的解决方案网上已经有很多了,浏览了目前主流的下拉控件比如PullToRefresh库等,第一:大多数实现库都难以进行动画和样式的自定义.第二:不能很好的兼容多种滚动控件,它们都对listView.RecyclerView等进行了不同程度的重新实现,你在项目中就得使用库提供的PullToRefreshListView.PullToRefreshRecyclerView等来代替源生的listView.RecyclerView等,这样的方式其实并不好,随着android版本的

Winform图片拖拽与缩放

最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个窗体,拖一个panel控件到窗体中,然后在拖一个pictureobx控件到panel中,然后在添加个上传图片的按钮: 具体代码: using System; using System.Collections.Generic; using System.ComponentModel; using Sy

css 可拖拽列表

<!DOCTYPE HTML> <html><head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> b

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge