关于EasyUI的Layout总结

Posted 2020-09-22

版权声明：本文为博主原创文章，未经博主允许不得转载。

1、layout以html标签方式建立的

[html] view plain copy print?

1. <div id="content" region="center" border="false" class="easyui-layout">  
2.                       
3.                     <div id="divPage1"  
4.                         data-options="region:‘west‘"  
5.                         style="width: 150px;"></div>  
6.                     <div id="divPage2"  
7.                         data-options="region:‘center‘,href:‘${basePath}/userManage_main.jspx‘"></div>  
8.                       
9.                 </div>  

这样，如果我想重新修改 div id="divPage1"这个layout的href属性，应该怎么实行？

实现方法：

[javascript] view plain copy print?

1. $("#divPage1").panel({region:‘west‘,href:‘${basePath}/userManage_left.jspx?width=‘+width});  
2. $("#divPage1").panel(‘refresh‘);  

必须执行panel的‘refresh’方法才会生效，因此这个‘userManage_left.jspx’页面会被执行2次。目前我的解决办法是使用js脚本建立的方式来解决。

 

2、用js脚本方式建立的

先建立一个div标签，用于生成layout。

 

[html] view plain copy print?

1. <div id="content" />  

 

js脚本创建

 

[javascript] view plain copy print?

1. $(‘#content‘).layout(‘add‘,{     
2.                     region: ‘west‘,     
3.                     width: 180,     
4.                     title: ‘West Title‘,     
5.                     split: true,     
6.                     href:‘${basePath}/userManage_left.jspx?width=‘+width,  
7.                     tools: [{     
8.                         iconCls:‘icon-add‘,     
9.                         handler:function(){alert(‘add‘)}     
10.                     },{     
11.                         iconCls:‘icon-remove‘,     
12.                         handler:function(){alert(‘remove‘)}     
13.                     }]     
14.                 });  
15.                 $(‘#content‘).layout(‘add‘,{     
16.                     region: ‘center‘,     
17.                     width: 580,     
18.                     title: ‘center Title‘,     
19.                     split: true,     
20.                     href:‘${basePath}/userManage_main.jspx‘,  
21.                     tools: [{     
22.                         iconCls:‘icon-add‘,     
23.                         handler:function(){alert(‘add‘)}     
24.                     },{     
25.                         iconCls:‘icon-remove‘,     
26.                         handler:function(){alert(‘remove‘)}     
27.                     }]     
28.                 });