IsabelLionel · 发表于 2017-01-11

文章77 · 评论0

jquery中的sortable排序之后的保存状态的解决方法

字数3467 · 浏览 818 · 评论 0

当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢。汗~~~以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下。
首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码。我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果。就像igoogle首页那样的。冒似很简单,把要引用的js都加入后,然后几行代码就完事了。

代码如下:

<script type=”text/javascript”>
$(function() {
$(“.column”).sortable({
connectWith: ‘.column’
});
});
</script>

html代码省略…详情请查看演示

写完这些之后,你就可以试着拖拽了。有没有觉得很有成就感?不错,小伙子,有前途。sortable 有许多的参数,详细的自己去官网上看吧!只说下这里的connectWith:’.column’是什么意思,它就是说,凡是class为column的,它都可以把一个column的portlet拖到另一个column里去。试试你就知道了。当然今天的重点并不是怎么样去拖拽它,而是拖拽之后刷新还保存着当时的顺序。

遇到点小困难了,不过那也得上啊,不然以后都被女孩子肯嫁给你!^_^ 于是乎我就开始google百度了。有人说用sortable的serialize方法可以得到一个ID数组,可惜,我确实没有得到。如果你做到了也请你tell me 一下;还有人说用toArray方法也可以得到ID数组.这次也确实得到了。不过非常令人讨厌的事发生了。

$(‘.column’).sortable(‘toArray’);

这样也只能得到第一个class是column里的ID数组.用each()? I tried, but not work;可能你能做到,也请你告诉我吧!所以只能转走其他方法了。或许你会说,这还不简单么,直接把整个网页的布局存起来不就OK了?哈哈,I also think so!通过iedeveloper调试工具发现,它们拖动之后发现了改变,变的不是样式,而是div的先后顺序。如果我把整个内容保存起来的话,似乎也行得通,不过量就有点大了,也不适于动态的内容。怎么办呢,于是我就想着只存它们的ID顺序不就O了吗?于是我又给它们每人一个ID了。

万事开头难,有了这个思路了之后,你是否已经厕所打开了呢?我先去下便下,谢谢开门,马上回来!

接下来就一步步按照这个思路来吧。首先是获取到所有的column.

$.each($(“.column”), function(m) {}

再找每个column下的portlet;

$.each($(“.column”), function(m) {
$.each($(this).children(“.portlet”), function(d) {
}

接着就是把它们按自己的方式存起来。

代码如下:

function saveLayout(){
var list = “”;
$.each($(“.column”), function(m) {
list += $(this).attr(‘id’) + “:”;
$.each($(this).children(“.portlet”), function(d) {
list += $(this).attr(‘id’) + “@”;
})
list += “|”;
})
$.cookie(“list”, list)}

这里还用到了另一组件jquery.cookie

改下开始的

代码如下:

$(“.column”).sortable({
connectWith: ‘.column’,
stop: saveLayout
});

stop是指拖拽结束后触发的事件.

最后就是按顺序读到容器里去,这里我就不多说了,只可意会,不能言传哈。贴代码吧:

代码如下:

var list = $.cookie(“list”); //获取cookie里的list值
//alert(list)
var arrColumn = list.split(‘|’);
$.each(arrColumn, function(m, n) {
var elemId = n.split(‘:’)[0]; //容器ID
var arrRow = n.split(‘:’)[1] ? n.split(‘:’)[1].split(‘@’) : “”; //单个序列ID
$.each(arrRow, function(m, n) {
if (n) {//排除空值
$(“#” + elemId).append($(“#sb” + n).attr(‘id’, n))//把序列填加进容器
}
});
})

好了,今天就这样吧,打字排版花了我一个小时了,公司给我的是一小时16块RMB。所以BYE!
如果你有任何的问题,都不要来问我,我很忙。到QQ群5678537里找其他人探讨吧!

演示代码http://demo.poluoluo.com/js/Sortable/Sortable.htm

本文系作者 IsabelLionel 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

问说网手机版

躺着 站着 跪着轻松访问

更多 热门话题

APP界面

APP界面

文章 41517

APP欣赏

APP欣赏

文章 41450

APP手机界面

APP手机界面

文章 41440

图片素材

图片素材

文章 29463

高清图片

高清图片

文章 26225

更多 推荐作者

问说网

文章 13116

GallupDarnell

文章 117

GibbonRoy

文章 119

StuartKelly

文章 115

YeatesGeoffrey

文章 113

发布评论

顶部 反馈 评论 底部

意见反馈

感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

您的反馈我们已收到!

感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!