【EasyUI】——EasyUI的布局
阿新 • • 發佈：2017-08-09
需要 columns content cal 創建 應用 body ttr name
方法應用比方：
總結
做一個站點首先要有站點的布局，所謂的布局事實上就是網頁的排版。就是說你的網頁顯示時是什麽樣子的。
就比方百度的首頁：
無論是誰登錄。網頁都是這個樣式的。
EasyUI中的網頁布局一共分為五部分，分別為東。西。南，北，中。在設計自己的網頁布局時，中間部分是必需要有的。其余四部分能夠不用。由於其余四部分的位置是依據中間部分位置來計算的。EasyUI的布局樣式有非常多。能夠選擇自己合適的布局使用，另外能夠設置布局中的一些屬性值。來使布局更適合自己的網頁。
分類
1、基本布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><div class="easyui-layout" style="width: 700px; height: 350px;">
<div data-options="region:'north'" style="height: 50px"></div>
<div data-options="region:'south',split:true" style="height: 50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width: 100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width: 100px;"></div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
<table class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid'" width="80">Item ID</th>
<th data-options="field:'productid'" width="100">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
<th data-options="field:'attr1'" width="150">Attribute</th>
<th data-options="field:'status',align:'center'" width="60">Status</th>
</tr>
</thead>
</table>
</div>
</div></span></span>
2、可加入和刪除part的布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Add and Remove Layout</h2>
<p>Click the buttons below to add or remove region panel of layout.</p>
<div style="margin: 20px 0;">
<span>Select Region Panel:</span>
<select id="region">
<option value="north">North</option>
<option value="south">South</option>
<option value="east">East</option>
<option value="west">West</option>
</select>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
</div>
<div id="cc" class="easyui-layout" style="width: 700px; height: 350px;">
<div data-options="region:'north'" style="height: 50px"></div>
<div data-options="region:'south',split:true" style="height: 50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width: 100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width: 100px;"></div>
<div data-options="region:'center',title:'Center'"></div>
</div>
<script type="text/javascript">
function addPanel() {
var region = $('#region').val();
var options = {
region: region
};
if (region == 'north' || region == 'south') {
options.height = 50;
} else {
options.width = 100;
options.split = true;
options.title = $('#region option:selected').text();
}
$('#cc').layout('add', options);
}
function removePanel() {
$('#cc').layout('remove', $('#region').val());
}
</script></span></span>3、可自己主動適應內容高度的布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Auto Height for Layout</h2>
<p>This example shows how to auto adjust layout height after dynamically adding items.</p>
<div style="margin: 20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a>
</div>
<div id="cc" style="width: 700px; height: 350px;">
<div data-options="region:'north'" style="height: 50px"></div>
<div data-options="region:'south'" style="height: 50px;"></div>
<div data-options="region:'west'" style="width: 150px;"></div>
<div data-options="region:'center'" style="padding: 20px">
<p>Panel Content.</p>
<p>Panel Content.</p>
<p>Panel Content.</p>
<p>Panel Content.</p>
<p>Panel Content.</p>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#cc').layout();
setHeight();
});
function addItem() {
$('#cc').layout('panel', 'center').append('<p>More Panel Content.</p>');
setHeight();
}
function removeItem() {
$('#cc').layout('panel', 'center').find('p:last').remove();
setHeight();
}
function setHeight() {
var c = $('#cc');
var p = c.layout('panel', 'center'); // get the center panel
var oldHeight = p.panel('panel').outerHeight();
p.panel('resize', { height: 'auto' });
var newHeight = p.panel('panel').outerHeight();
c.height(c.height() + newHeight - oldHeight);
c.layout('resize');
}
</script></span></span>
4、復雜布局（包括動態菜單條）
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Complex Layout</h2>
<p>This sample shows how to create a complex layout.</p>
<div style="margin: 20px 0;"></div>
<div class="easyui-layout" style="width: 700px; height: 350px;">
<div data-options="region:'north'" style="height: 50px"></div>
<div data-options="region:'south',split:true" style="height: 50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width: 180px;">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div>
<div data-options="region:'west',split:true" title="West" style="width: 100px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Title1" style="padding: 10px;">
content1
</div>
<div title="Title2" data-options="selected:true" style="padding: 10px;">
content2
</div>
<div title="Title3" style="padding: 10px">
content3
</div>
</div>
</div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
<div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
<div title="About" data-options="href:'_content.html'" style="padding: 10px"></div>
<div title="DataGrid" style="padding: 5px">
<table class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid'" width="80">Item ID</th>
<th data-options="field:'productid'" width="100">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
<th data-options="field:'attr1'" width="150">Attribute</th>
<th data-options="field:'status',align:'center'" width="50">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div></span></span>5、適應全屏的布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div> <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div> <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div> <div data-options="region:'center',title:'Center'"></div> </body> </span></span>
6、嵌套的布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Nested Layout</h2>
<p>The layout region panel contains another layout or other components.</p>
<div style="margin: 20px 0;"></div>
<div class="easyui-layout" style="width: 700px; height: 350px;">
<div data-options="region:'north'" style="height: 50px"></div>
<div data-options="region:'south',split:true" style="height: 50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width: 180px;"></div>
<div data-options="region:'west',split:true" title="West" style="width: 100px;"></div>
<div data-options="region:'center',iconCls:'icon-ok'" title="Center">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:true,border:false" style="height: 50px"></div>
<div data-options="region:'west',split:true,border:false" style="width: 100px"></div>
<div data-options="region:'center',border:false"></div>
</div>
</div>
</div></span></span>7、無收縮button的布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>No collapsible button in Layout</h2>
<p>The layout region panel has no collapsible button.</p>
<div style="margin: 20px 0;"></div>
<div class="easyui-layout" style="width: 700px; height: 350px;">
<div data-options="region:'north'" style="height: 50px"></div>
<div data-options="region:'south',split:true" style="height: 50px;"></div>
<div data-options="region:'east',split:true,title:'East',collapsible:false" style="width: 250px;">
<table id="tt" class="easyui-propertygrid" data-options="
url: 'propertygrid_data1.json',
method: 'get',
showGroup: true,
fit: true,
border: false
">
</table>
</div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',href:'_content.html'" style="padding: 10px">
</div>
</div></span></span>屬性方法
| 方法名 | 方法屬性 | 描寫敘述 |
| resize | none | 設置布局大小 |
| panel | region | 返回指定面板，“region”參數可用值有：north。south，east，west，center。 |
| collapse | region | 折疊指定面板，“region”參數可用值有：north。south，east。west。 |
| expand | region | 展開指定面板，“region”參數可用值有：north。south。east，west。 |
| add | options | 加入指定面板。屬性參數是一個配置對象 |
| remove | region | 移除指定的面板，“region”參數可用值有：north。south，east。west。 |
折疊布局面板：$(‘#cc‘).layout(‘collapse‘,‘west‘);
加入西區面板：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">$('#cc').layout('add',{
region: 'west',
width: 180,
title: 'West Title',
split: true,
});</span></span> 當中設置的屬性即西區面板的屬性。如region表示面板的位置。width為面板寬度，title為面板標題，split為用戶能否夠改變面板大小。
| 屬性值 | 屬性值類型 | 描寫敘述 | 默認值 |
| fit | boolean | 假設設置為true，布局組件將自適應父容器。當使用‘body‘標簽創建布局的時候，整個頁面會自己主動最大。 |
false |
| 屬性值 | 屬性值類型 | 描寫敘述 | 默認值 |
| title | string | 布局面板標題文本 | null |
| region | string | 定義布局面板位置，可用的值有：north，south，east，west。center。 | |
| border | boolean | 為true時顯示布局面板的邊框 | true |
| split | boolean | 為true時用戶能夠改變每一面板大小 | false |
| iconCls | string | 一個包括圖標的CSS類的ID。該圖標將會顯示到面板標題上 | null |
| href | string | 用於讀取遠程網站數據的URL鏈接 | null |
| collapsible | boolean | 定義是否顯示折疊button | true |
| minWidth | number | 最小面板寬度 | 10 |
| minHeight | number | 最小面板高度 | 10 |
| maxWidth | number | 最大面板寬度 | 10000 |
| maxHeight | number | 最大面板高度 | 10000 |
總結
每接觸什麽東西都認為非常難，事實上就是沒有和曾經的知識結合起來，僅僅要以自己學過的知識為基礎。再去學自己所謂的新的東西，那麽這些東西也就變得簡單了。
【EasyUI】——EasyUI的布局