EasyUI Cookie记忆layout的布局

 

最近在开发中，想保存easyui的一个复杂界面的layout，让用户可以根据自己的分辨率和喜好进行界面布局的调整，并保存下来，下次进入的时候使用保存的布局位置。

 

设计：

1、需要在布局拖动的时候记录下layout部件的位置（我这里使用的是north和center，并使用fit填充全页面的方式布局，所以只需要记录north的高度就OK）。

2、在进入页面时，jquery和easyui初始化和渲染完成后，执行resize操作。

 

找方案，想办法

1、官方文档基本没有办法实现，easyui.layout虽然继承了resizable，但是查看了官方混淆后的烂代码，勉强发现官方已经覆写了resizable的相关事件，所有基本可以说，官方没有提供该功能。

2、热，从源代码下手，去修改混淆的源代码，分析后，发现是可行的，但是需要动官方源代码升级会很麻烦，前面从1.3.1升级到1.3.3已经麻烦过一次了。。。

3、通过强大的google浏览器，分析DOM结合官方API，通过1个多小时努力，找到解决方案。如下：

 

1、注册layout的布局子对象的panel,然后注册其onResize事件，获取变动后的位置，并记录到cookie中。

 

function registerRememberPosEvent(){
	$('#manage_popup_layout').layout('panel','north').panel({
		onResize:function(w,h){
			rememberPos(h);		
		}
	});
}
function rememberPos(h){
  $.cookie('popup.position.height', h);
}

 

 

2、页面初始化完成后，先resize布局子对象的panel，然后再调用layout的resize，实现读取cookie中保存的位置并设置。

// 读取cookie,并设置初始化布局高度
function recoverPos(timestamp){
	var h = $.cookie('popup.position.height');
	if(!h) h=400;
	$('#manage_popup_layout').layout('panel','north').panel('resize',{height:h});
	$('#manage_popup_layout').layout('resize');
}

 

3,、进入页面，初始化完成后，注册事件，读取cookie，resize位置

// easyui渲染完成事件，注意这是全局事件，用了后注销下。
$.parser.onComplete=function(context){
        registerRememberPosEvent()
        recoverPos();
	$.parser.onComplete = function(){
		console.info("[popup]已注销onComplete事件");
	}
}

 

 

希望对有相同需求的兄弟有帮助。