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


Posted in Javascript onJanuary 28, 2010

当时也就从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.3water.com/js/Sortable/Sortable.htm

Javascript 相关文章推荐
理清apply(),call()的区别和关系
Aug 14 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
javascript数组去重小结
Mar 07 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
javascript面向对象的方式实现的弹出层效果代码
Jan 28 #Javascript
jquery 常用操作方法
Jan 28 #Javascript
jquery 经典动画菜单效果代码
Jan 26 #Javascript
使用JQuery进行跨域请求
Jan 25 #Javascript
javascript 的Document属性和方法集合
Jan 25 #Javascript
起点页面传值js,有空研究学习下
Jan 25 #Javascript
js 巧妙去除数组中的重复项
Jan 25 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python实现直播推流效果
2019/11/26 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
《盘古开天地》教学反思
2014/02/28 职场文书
卖车协议书
2014/04/21 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
个人优缺点总结
2015/02/28 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL