1.1. easyui的目錄分析

以 jquery Easy UI 1.3.2 版本學習

demo 實例

locale 國際化信息

plugins 框架一些插件

src 源碼

themes 樣式文件

easyloader.js 框架核心加載器 （加載其它plugin）

jquery-1.8.0.min.js jQuery類庫

jquery.easyui.min.js 框架類庫 （等價於 easyloader.js + plugins 所有插件 ）

1.2. 在項目中引入 EasyUI

必須引入

<!-- 先引入 jquery的 js -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.8.3.js">
</script>
<!-- 引入 easyui的js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入國際化 js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入 默認樣式 css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"/>
<!-- 引入 icon圖標 css  -->
<link rel="stylesheet"
type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"/>

1.3. easyui 的layout 控件使用

布局控件 對一個div使用，也可以對 整個頁面 body元素使用

1.4. easyui 的accordion 折疊面板使用

設置fit屬性，讓面板占滿父容器

<!-- 折疊面板  -->
<!-- fit屬性，使當前div大小占滿父容器  -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 通過iconCls 設置圖標，找 icon.css中 類定義 -->
<div data-options="title:‘基本功能‘,iconCls:‘icon-mini-add‘">面板一</div> <!-- 這裏每個div就是一個面板 -->
<div data-options="title:‘高級功能‘">面板二</div>
<div data-options="title:‘管理員功能‘">面板三</div>
</div>

1.5. easyui 的 tabs 選項卡面板 使用

<div data-options="region:‘center‘">
<!-- 選項卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<div data-options="title:‘選項卡一‘">內容一</div>
 <!-- 這裏每個div 就是一個選項卡 -->
<!-- closeable 可關閉 -->
<div data-options="title:‘選項卡二‘,closable:true">內容二</div>
<div data-options="title:‘選項卡三‘">內容三</div>
</div>
</div>

1.6. 樹形菜單的制作

使用 ztree插件，制作樹形菜單

zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。

下載 ztree 3.5.02 版本

api 文檔

css 樣式

demo 案例

js 核心類庫文件

all.js = core + check + edit + hide 開發中只需要引入 all.js

在頁面引入 ztree

<!-- 引入ztree  -->

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>

案例一： 標準數據tree

1、 在顯示樹位置寫 <ul> 標簽

<!-- 顯示樹 -->
<ul id="basicTree" class="ztree"></ul>

2、 通過js 編寫setting對象

// 設置樹參數
var setting = {};

3、 設置樹節點數據

// 數據

var zNodes = [
{"name":"菜單一"}, // 每個{} 就是一個節點
{"name":"菜單二"}
];

4、初始化樹

// 初始化樹
$.fn.zTree.init($("#basicTree"), setting, zNodes);

復雜樹

問題： 標準數據樹，不適用大數據的樹結構

案例二： 簡單數據ztree

1、 在顯示ztree位置定義 ul

<!-- 顯示樹(簡單數據 ) -->
<ul id="simpleTree" class="ztree"></ul>

2、 設置ztree參數 setting

// 設置樹參數

var setting = {
data : {
simpleData : {
enable : true
}
}
};

3、 樹節點數據

// 數據

var zNodes = [
 // id 代表本節點編號，pId代表父節點編號
{"id":"1","pId":"0","name":"菜單一"},
{"id":"2","pId":"0","name":"菜單二"}
];

4、 初始化樹

// 初始化樹

$.fn.zTree.init($("#simpleTree"), setting, zNodes);

復雜樹

通過url 屬性，完成樹節點跳轉

通過icon屬性，定制節點圖標

Jquery學習---Easy UI 框架