關於EasyUI的Layout總結

轉自http://blog.csdn.net/foart/article/details/9130937

1、layout以html標籤方式建立的

<div id="content" region="center" border="false" class="easyui-layout">

                    <div id="divPage1"
                        data-options="region:'west'"
                        style="width: 150px;"></div>
                    <div id="divPage2"
                        data-options="region:'center',href:'${basePath}/userManage_main.jspx'"></div>

                </div>

這樣，如果我想重新修改 div id="divPage1"這個layout的href屬性，應該怎麼實行？

實現方法：

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

必須執行panel的‘refresh’方法纔會生效，因此這個‘userManage_left.jspx’頁面會被執行2次。目前我的解決辦法是使用js腳本建立的方式來解決。

 

2、用js腳本方式建立的

先建立一個div標籤，用於生成layout。

 

<div id="content" />

 

js腳本創建

 

$('#content').layout('add',{
                    region: 'west',
                    width: 180,
                    title: 'West Title',
                    split: true,
                    href:'${basePath}/userManage_left.jspx?width='+width,
                    tools: [{
                        iconCls:'icon-add',
                        handler:function(){alert('add')}
                    },{
                        iconCls:'icon-remove',
                        handler:function(){alert('remove')}
                    }]
                });
                $('#content').layout('add',{
                    region: 'center',
                    width: 580,
                    title: 'center Title',
                    split: true,
                    href:'${basePath}/userManage_main.jspx',
                    tools: [{
                        iconCls:'icon-add',
                        handler:function(){alert('add')}
                    },{
                        iconCls:'icon-remove',
                        handler:function(){alert('remove')}
                    }]
                });