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

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

相关文章

  • 2014-11-19在ECSHOP留言板页面显示商品缩略图
  • 2015-08-14zepto.fullpage移动端全屏滚动插件中文API文档
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-17Aroma基于Lua的游戏开发框架
  • 2016-05-17界面设计之尺寸篇
  • 2016-06-14Kalendae轻量级时间日期选择JavaScript插件
  • 发布评论

    为您推荐

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

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

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

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

    Polymer使用Web网络组件构建现代应用程序

    Polymer 是一个基于Web组件的新型Web前端开发框架,包括一系列全面的、用于构建Web应用的UI和工具组件。可以让您创建可重复使用的元件封装,工作就像标…

    问说网 · 发布于 2016-04-16

    jQuery.PercentageLoader加载进度显示插件

    jQuery.PercentageLoader 这个jQuery插件能够产生一种吸引人、更直观醒目的方式显示进度。它采用HTML 5 canvas 生成进度图片…

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

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    SweetTooltip基于jQuery和CSS3链接工具提示插件
    问说网 · 发布于 2016-07-01

    SweetTooltip基于jQuery和CSS3链接工具提示插件

    SweetTooltip 工具提示是一个基于jQuery和CSS3的工具提示,它不仅仅是一个风格,而是有七种风格。这种无背景图风格的工具提示制作使用线性梯度,阴…

    Java初识

    版本体系 JavaSE Java 2 Platform, J2SE, Standard Edition,标准版, 主要用于桌面应用软件的编程, 包含那些构成Ja…

    • Java初识
    • Java初识
    • Java初识
    • Java初识
    Vincent · 发布于 2016-07-06 · 浏览 1068 · 评论 0
    Vincent · 发布于 2016-07-06

    Oracle(ALL | DBA | USER)

    查看用户 查看所有的用户 select * from all_users; 查看dba的用户 select * from dba_users; 注:由于dba拥…

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

    phpStudy让天下没有难配的PHP环境

    该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+Zend Loader,一次性安装,无须配置即可使用,是非常方便、好用的PHP调试环境…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    IsabelLionel

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

    89 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3020

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2801

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2911

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2335

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2534

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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