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

IsabelLionel · 发布于 2017-01-11 · 字数3467 · 浏览 833 · 评论 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 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-11-09Google JavaScript 编码规范指南
  • 2016-01-14Moobile基于MooTools移动应用开发框架
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-03-18如何在Rails中基于Zepto使用Ajax异步加载
  • 2016-05-1510个网页设计灵感来源
  • 2016-05-16经验分享!做好数据可视化设计的五个重要因素
  • 2016-05-17手把手教你做霸气的PS特效标题字
  • 2016-06-13BxCarousel基于jQuery图片滚动插件
  • 发布评论

    为您推荐

    问说网 · 发布于 2014-03-13

    在wordpress中使用Pygments语法高亮工具

    我已经在一个漫长的旅程试图找到一个伟大的代码高亮,我一直在使用他们中的很多,我什至不记得。 这些都是我能记得现在:SyntaxHighlighter、Googl…

    问说网 · 发布于 2015-07-26

    PHP插入数据库处理和注意事项

    PHP插入数据库一般我们都会处理一下,一般会把一些字符转义,防止SQL注入和服务器入侵,PHP自带了多个处理字符串的函数,我们一起来看看。

    问说网 · 发布于 2015-12-01

    浅谈IE浏览器中的画笔VML

    VML是The Vector Markup Language(矢量可标记语言)的缩写,最初由Microsoft开发的XML词表,现在也只有IE5.0以上版本对V…

    问说网 · 发布于 2015-12-03

    Zaxas轻量级面向对象编程Ajax框架库

    Zaxas 是一个面向对象的 Ajax 框架,带来更直观的 Web 应用,实现非常简单,这是一个开源项目托管在SourceForge.net。这是授权的GNU通…

    问说网 · 发布于 2015-12-16

    分享CSS技巧解决浏览器兼容性问题

    本文将为大家介绍几种常见的浏览器兼容性问题,以及每个问题的详细解决方法,其中可能用到了CSS Hack,不过大多数都是使用CSS原生方法解决的。

    Crossfilter构建数据分析程序的JavaScript插件
    问说网 · 发布于 2016-02-11

    Crossfilter构建数据分析程序的JavaScript插件

    Crossfilter 是一个用来展示大数据集的 JavaScript 库,支持超快的交互,甚至在上百万或者更多数据下都很快。主要用来构建数据分析程序。

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    问说网 · 发布于 2016-12-02

    FlyJSONP轻量级的跨域AJAX请求插件

    FlyJSONP是一个JavaScript库,用于实现跨域GET和POST请求服务,支持JSONP,并取得一个JSON格式的数据响应,这个Library具有易于…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    IsabelLionel

    这个人比较懒,什么都没有填写!

    89 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1574

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1506

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1522

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1026

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1217

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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