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 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
用 php 编写的日历
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php curl模拟post请求小实例
2013/11/13 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
儿童编程python入门
2018/05/08 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Django 路由控制的实现代码
2018/11/08 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Django操作session 的方法
2020/03/09 Python
Python 字典中的所有方法及用法
2020/06/10 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
雷蛇美国官网:Razer
2020/04/03 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
求职自荐书范文
2013/12/04 职场文书
学历证明范文
2015/06/16 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技