Gridster.js是一款Duckboard设计的开源JS框架，主要用来实现用户可操控的网格布局，官网（)上有Demo。这两天工作需要研究了一下Gridster.js结合ajax保存用户的布局数据，使用户离开网页后再次进入能展现出用户上一次设置的网格布局。
一.前端设计
界面效果大致如上图所示（不是专业做这个的，比较难看，重点主要在功能的实现上），实现的功能包括：按住绿色的部分可以拖拉导航网格，点击关闭可以移除相应的网格，按住右下角可以进行放缩，最后，当用户离开页面（包括关闭面板，关闭浏览器，刷新页面）时自动上传位置信息，当用户下次浏览时自动恢复布局。下面给出js代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试</title><link href="style.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="jquery.gridster.css"><script src="jquery-1.11.2.js" type="text/javascript"></script><script src="jquery.gridster.js" type="text/javascript" charset="utf-8"></script><script>$(document).ready(function(){//初始化Gridster对象gridster =new Gridster($(".gridster ul"),{ //通过jquery选择DOM实现gridsterwidget_base_dimensions: [100, 120], //模块的宽高 [宽,高]widget_margins: [5, 5], //模块的间距 [上下,左右]draggable: {handle: '.drag' //模块内定义拖动的元素},//设置resize句柄resize:{enabled: 'true',//允许放缩handle:'.resize'//html标签的css类名，按住此标签可以对网格进行放缩},//设置serialize()方法的返回值serialize_params: function($w, wgd) {//$w为要输出位置的网格对象（li），wgd为该网格对象的坐标对象，包括col，row，size//_x,size_y四个成员return { col: wgd.col,row: wgd.row,size_x: wgd.size_x,size_y: wgd.size_y,url:$w.find("a").attr("href"), //这里对官网的样例进行了扩展，不仅上传坐标信息，，还上传了url和titletitle:$w.find("a").html()} },});$.ajaxSetup({cache:false});//页面加载完后获取上一次用户的布局//这里localhost不能和127.0.0.1混用，若浏览器的请求地址必须与这里的完全一致，全部为localhost或全部为127.0.0.1$.get(":8080/ui/positionStore.jsp",function(data,status){gridster.remove_all_widgets();//注意：1.Gridster首字母必须大写；2.先按row排序，row相同的再按列排序，按排序后的顺序插入data可以保证位置不会偏移data = Gridster.sort_by_row_and_col_asc(data);alert("排序后的widget:\n"+JSON.stringify(data));for(var i=0;i<=data.length;i++){var li="<li><div style='width:100%;height:20%'>"+ "<div class='drag' style='width:60%;background-color:#00FF00;float:left'>拖拽</div>"+ "<div class='close' style='width:40%;background-color:#FF0000;float:left'>关闭</div></div>"+ "<div style='width:100%;height='80%';background-color:#33FFFF;overflow:hidden'> "+ "<a href='"+data[i].url+"'>"+data[i].title+"</a>"+ "</div></li>";gridster.add_widget(li,data[i].size_x,data[i].size_y,data[i].col,data[i].row);}});//关闭widget //注意：一定要用on(event,selector,function)方法，该方法使用委托机制$('ul').on("click",".close",function(){gridster.remove_widget( $(this).parents("li"));});//上传布局,若使用$(window).unload()配合$.post，在chrome浏览器中，刷新时可能无法从数据库取得最新位置信息，可在数据库中增加一张更新状态表//在IE浏览器中则连数据都无法上传，结合两种浏览器的情况，必须使用$.ajax()并将async设置为false$(window).on("unload",function(){alert("即将上传");var s = gridster.serialize();/* $.post(":8080/ui/positionStore.jsp",JSON.stringify(s),function(data,status){alert("上传结果Status: " + status);}); */$.ajax({type: "POST",url: ":8080/ui/positionStore.jsp",data: JSON.stringify(s),success: function(data,status){alert("上传结果Status: " + status);},//必须设置为同步模式，即回调函数执行完毕后才向下执行(unload页面)async:false});});/* $(window).on("unload",function(){while(1!=isUploaded) ;alert("上传完毕");}); */});</script></head><body><div id="container"><div id="top" ><form id="form"><span class="bg s_ipt_wr iptfocus quickdelete-wrap"><input name="wd" class="s_ipt" id="kw" maxLength="255" autocomplete="off" value=""/></span><span class="bg s_btn_wr"><input class="bg s_btn" id="su" type="submit" value="搜索"/></span></form></div><div id="bottom" class="gridster" style="border:1px solid #e0e0e0;"><ul ></ul><!–<button id="upload">上传位置</button>–></div></div></body></html> gridster基本的用法大家可以网上查到，下面说说遇到的几个问题：关闭网格——动态元素的事件绑定$('ul').on("click",".close",function(){gridster.remove_widget( $(this).parents("li"));});由于li标签及其子元素都是通过jQuery动态加载的，所以普通的事件绑定方法是无效的，这里必须使用on函数，这个函数是重载的，注意：要实现事件的动态绑定，这里的三个参数缺一不可，由于ul是本身就存在的，所以把事件绑定在ul上，原理可以百度上搜。 二.存在问题我们摇摇头说，困难其实没什么大不了。
