關於EasyUI的Layout總結

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。

一、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腳本創建的方式來解決。

 

二、用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')}
                    }]
                });