jquery实现表格拖拽排序
来源:互联网 发布:怎样评价携程 知乎 编辑:程序博客网 时间:2024/05/20 16:13
最开始使用时,我是参考这篇文章:
http://www.oschina.net/code/snippet_203508_7090
可以点击“全屏查看所有代码”,可以看得更清楚。
1、引入:jQuery文件和jquery-ui.js
- 1
- 2
其中jquery-ui.min.js可以去官网下载:http://jqueryui.com/download/all/
假设我们有这么一个table:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
给table中id随便去个名字,我去的名字是:sortable
如果我进行任何操作,仅仅只是拖拽的话,以下两行代码就可以啦;
- 1
- 2
但是我们往往是希望能把我们排好的顺序通过发送请求保存到后台数据库里面去!
所以我们需要以下的配置;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
以上是我的代码;
其中名为fixHelper的函数方法是为了在拖拽行时,单元格的宽度保持不变!
主要的部分就是:
- 1
- 2
- 3
这里面一些固定的配置:
- 1
- 2
- 3
以上配置没什么好说的,都是常用的固定配置。
之后,我的方法里面写了start:function(e,ui){},sort:function(e,ui){},stop:function(e,ui){}事件。
start事件是:当排序动作开始时触发此事件。
我的设置是ui.helper.css({"background":"#fff"}) //拖动时的行,要用ui.helper
return ui;
sort事件是:当元素发生排序时触发此事件
在这里我进行业务逻辑的处理;
当前拖拽的元素我可以通过ui.item来获取。
如果我们向上拖拽,那么我就要获取拖拽后新位置的下一个元素。
如果我们向下拖拽,那么我就要获取拖拽后新位置的上一个元素。
为什么要这样获取呢?因为要获取到底哪些行受到了影响。
举例 table表格总共有1,2,3,4,5,6,7,8,9,10行。
假设我拖住的是第6行,把6移到了3的位置,也就是受到影响的行时3,4,5,6.
并且新的顺序是6,3,4,5.其他行没有受到影响,就不用进行处理。那么我怎么知道哪些行受到影响呢!当你移到新的位置时,你可以通过新的位置去找它的下一个元素,这里就是3这个元素。这样我们就知道是3到6行受到影响;这个是向上拖拽。向下拖拽同理。
我们还要知道两点:
1、当我们在进行拖拽时,被拖拽的当前行的样式class是会发生改变的!插件会给它添加一个名为:ui-sortable-helper类。如果不使用ui.item来获取当前元素,也可以通过这个类来获取。
2、当我们移动的时候,该插件会在新的位置,放置一个起到占位符的元素,该元素的class为:ui-sortable-placeholder。所以在拖拽过程的事件中,我们可以通过该类来获取新位置的上一个元素或者下一个元素。
插件添加的class在拖拽结束后都会移除掉!
代码如下:
- 1
- 2
stop事件是:当排序动作结束时触发此事件。
在这个事件里依然也是业务逻辑的处理。
sort事件里我只是获取到了当前元素位置、新位置的上一个或者下一个元素的位置(也就是两个参数)。在stop事件里,我将通过这两个参数来把受影响的行组装成新的顺序,并放到array数组中去。再通过ajax发送到后台保存到数据库里去!stop事件中逻辑处理代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
数据库表中有个sort字段,专门用来记录顺序的!
最后$(“#sortable”).disableSelection();//防止拖拽时选中文本内容!
- jquery实现表格拖拽排序
- JQuery实现对表格列排序
- jquery表格、序列的拖拽排序dragsort
- jquery表格排序
- jquery表格排序插件
- jQuery 表格排序插件
- jquery表格排序
- jQuery+Ajax实现表格数据不同列标题排序
- 扩展jquery实现客户端表格的分页、排序
- 使用jQuery实现table表格排序js插件
- java + jquery-ui.sortable.js插件实现表格拖动排序
- jQuery 实现表格斑马线
- jquery实现编辑表格
- jquery 实现表格
- jquery实现动态表格
- jQuery实现div横向拖拽排序
- jQuery表格排序组件-tablesorter
- jQuery插件之表格排序
- snprintf()函数使用方法
- linux oracle服务启动
- Redis更新缓存策略
- Spring Cloud微服务分布式云架构
- shiny server (免费版)部署访问密码设置
- jquery实现表格拖拽排序
- 【转载】tensorflow:control dependencies
- 【Ray Tracing in One Weekend】(ch5)法向量的可视化与多个球的出现
- ubuntu解决菜单栏和工具栏消失的方案
- 自学Qt之路——串口编程(使用自带Qt库)
- 【LeetCode】206. Reverse Linked List
- Spring Cloud 之分布式配置基础应用
- vue 时间戳转换为日期的方式
- HSSFWorkBooK用法