使用easyui進行上左右布局

在後台管理系統開發的過程中，上左右的布局是最常見的頁面布局方式，現在我們來看看使用easyui這個jquery前端框架如何快速搭建乙個可用的頁面框架。

1.在頁面中引入easyui所需的檔案

1
<%
--載入easyui的樣式檔案，bootstrap風格 
--%>
2<
link 
href
="$/css/themes/bootstrap/easyui.css"
rel="stylesheet"
>
3<
link 
href
="$/css/themes/icon.css"
rel="stylesheet"
>
4<%
--載入jquery和easyui的指令碼檔案 
--%>
5<
script 
src="$/js/jquery-easyui-1.4.4/jquery.min.js"
>
script
>
6<
script 
src="$/js/jquery-easyui-1.4.4/jquery.easyui.min.js"
>
script
>
7<
script 
src="$/js/jquery-easyui-1.4.4/locale/easyui-lang-zh_cn.js"
>
script
>

2.在頁面body部分構建必要的html結構

<
body
>
<
div 
id="home-layout"
>
<
div 
data-options
="region:'north'"
style
="height:50px;"
>
div>
<
div 
data-options
="region:'west',title:'選單欄'"
style
="width:200px;"
>
<
div 
class
="home-west"
>
<
ul id
="home-west-tree"
>
ul>
div>
div>
<
div 
data-options
="region:'center'"
>
<
div 
id="home-tabs"
>
<
div 
title
="首頁"
>
<
h2 style
="text-align: center"
>歡迎登入
h2>
div>
div>
div>
div>
body
>

這裡需要注意一點：easyui在使用layout布局的時候，north、south需要指定高度，west、east需要指定寬度，而center會自動適應高和寬。

3.使用js初始化easyui元件

我個人比較推薦使用js**去初始化easyui元件，而不使用easyui標籤中的data-options屬性去初始化。因為對於後台開發人員來說，寫js**可能比寫html標籤更加熟悉，而且這樣使得html**更加簡潔。

4.easyui-tree元件所需的json格式

easyui使用的傳輸格式為json，它對json內容的格式有比較嚴格的限制，所以請注意檢視api。

text為樹的節點名稱，children則表示子節點，state表示關閉的狀態（我們可以利用這個屬性來構建延遲載入樹），而attributes則是easyui-tree為我們提供的乙個自定義屬性，在這個屬性下，我們可以自定義屬性，例如我就在其中定義了url屬性，並為其賦值。當然，我們還能夠為其新增其他自定義屬性。

[
},    }]
},        },
},},
}]}]
},,]
},,]
}]}]

就這樣，我們使用easyui完成了簡單的上左右布局。

使用easyui進行上左右布局

使用QMainWindow進行布局

使用Qt Designer進行布局

easyUI使用分頁過濾器對資料進行分頁操作

使用easyui進行上左右布局

使用QMainWindow進行布局

使用Qt Designer進行布局

easyUI使用分頁過濾器對資料進行分頁操作

相關推薦