最近在开发中,想保存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事件");
}
}
希望对有相同需求的兄弟有帮助。