我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jquery拖拽排序,拖拽排序后端

使用jQuery实现列表排序功能

jquery拖拽排序,针对后台列表table进行拖拽排序(超实用!)

崇信ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序。

话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js

先上html代码,很简单:

!DOCTYPE htmlhtml lang="en"head

meta charset="UTF-8"

titlejqueryUI拖动/title/headscript src="js/jquery-1.11.0.min.js"/scriptscript src="js/jquery-ui.min.js"/scriptstyle

tr{cursor: pointer;}/stylebodytable id="sort"

thead

tr

th class="index"序号/th

th年份/th

th标题/th

th作者/th

/tr

/thead

tbody

tr

td class="index"1/td

td2014/td

td这是第1个/td

td阿斯蒂芬阿斯蒂芬/td

/tr

tr

td class="index"2/td

td2015/td

td这是第2个/td

td阿萨德发射点发岁的/td

/tr

tr

td class="index"3/td

td2016/td

td这是第3个/td

td阿萨德发送地方/td

/tr

tr

td class="index"4/td

td2017/td

td这是第4个/td

td的说法大赛分/td

/tr

/tbody/table/body/html

除了要引入jquery.js 和jqueryUI.js外,还需要如下一段代码:

$(document).ready(function(){        var fixHelperModified = function(e, tr) {                    var $originals = tr.children();                    var $helper = tr.clone();

$helper.children().each(function(index) {

$(this).width($originals.eq(index).width())

});                    return $helper;

},

updateIndex = function(e, ui) {

$('td.index', ui.item.parent()).each(function (i) {

$(this).html(i + 1);

});

};

$("#sort tbody").sortable({

helper: fixHelperModified,

stop: updateIndex

}).disableSelection();

});

这是我发现的比较实用的一个拖动排序,还是比较方便的。

jquery 通过拖动排序

例子没有。关于拖动的jquery插件很多~jquery ui就能实现~

如:

div data-id='1'1/div

div data-id='2'2/div

div data-id='3'3/div

排序后为:

div data-id='2'2/div

div data-id='1'1/div

div data-id='3'3/div

思路就是jquery each()函数获取id,一次写入字符串中(所得为‘2,1,3’),执行ajax请求,将字符串放入数组,key为id,value为序号,所得为:

array(

'2' = '1',

'1' = '2',

'3' = '3'

)

更新数据库即可。

随手打的,不知道对你是否有帮助。

如何用Jquery实现多选后拖拽再排序,列表数据

jquery ui sortable没有这种能力,只能自己多加点代码就进行排序了。。比如,你定义一个数组,把多选的东西都放在数组里,然后进行排序。。不过具体怎么排,就看你的业务需求了。

关于jquery sorttable拖拽排序之后如何保存位置到数据库优化算法

我现在保存的方式是有很大问题的,望高手们能给一个算法优化我的代码

页面上有无限制div行数的数据,比如

name order

a 1

b 2

c 3

d 4

e 5

f 6

1、首先把b拖到a前面,我的做法是当遇到最顶端的数值时把他们的序号1/2=0.5

2、把b拖到c和d之间,做法是把(3+4)/2=3.5

3、把b拖拽到f后面,当遇到最末端的数值时把他们的序号6+1=7

这时候把3种情况name为b的序号值保存进数据库,下次刷新排序之后的结果看起来是没有问题的

但这玩意用久了,也就是说给管理员拖了很多次b的数据之后会不停的上下相加然后相除,虽然序号我定义的是double类型,但已经去到-28E位数,记得到-32E就会超出double的长度。所以我觉得我这样做是绝对只能是用一时的半成品,功能的要求又想实时拖拽,实时保存进数据库,而不想点击按钮来统一保存。

请教朋友们有没有比较好的算法来处理这种问题,有人提出用链表,但我还是理解不得,具体做法


文章名称:jquery拖拽排序,拖拽排序后端
分享路径:http://mswzjz.cn/article/dsdsdjh.html

其他资讯