初學jQuery Easy UI的總結
阿新 • • 發佈：2019-02-20
1.使用jQuery Easy UI的目的：
jQuery Easy UI是一組基於jQuery的UI外掛集合，而jQuery Easy UI 的目標就是幫助Web開發者更輕鬆的打造出功能豐富並且美觀的 UI介面。
官方網站 http://www.jeasyui.com
2.使用jQuery Easy UI完善專案——電腦作業系統，做出以下效果：
2.1引入jQuery 核心庫：
<script type="text/javascript" src="jquery.min.js"></script>
引入jQuery EasyUI 核心庫：<script type="text/javascript" src="jquery.easyui.min.js"></script>新增檔案themes(EasyUI中檔案)，建議建立一個sourse檔案放進去。
新增一個jar包：struts2-spring-plugin-2.3.32.jar
以及插入自己所要用到的html頁面
2.2在首頁引入EasyUI所需要的介面，在head中所寫的內容，複雜的程式碼可以直接複製原始碼。
注意：href中路徑問題，要根據自己放的地方修改路徑。
在body中所新增的內容，顯示出來的效果就是最外層的樣式，<head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> </head>我所實現的是在最左邊的west樣式中，顯示手風琴的效果，也就是顯示四個欄目<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px" >電腦系統</div> <div data-options="region:'west',split:true,title:'West'" style="width:200px;padding:10px;"> <div class="easyui-accordion"> </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>在west中新增div,p標籤中是跳轉的欄目
為了適應所有的頁面在center中加入iframe標籤，name自己定義名字，並在weast中的div p標籤新增target屬性，target屬性引用<div title="檢視電腦配件" data-options="iconCls:'icon-ok'" style="padding:10px;"> <p><a href="look" target="look" >XX電腦配件</a></p> </div>的是iframe中定義的name，這樣就可以適應到所要跳轉的頁面。
2.3手風琴中樹狀圖的引用是用的json，具體實現如下：<iframe name="look" frameborder="0" width="100%" height="100%" style="background-color: transparent"></iframe>
定義一個實體類Tree,必須定義的屬性如下需要get set，並生成它的對映檔案。對Tree進行業務處理，並實現業務，首先通過id對目錄進行查詢，實現方法返回定義的listre。private Integer id; private String text; private String state; private Integer parentid;//樹狀圖 public List<Tree> findTre(Integer id);新建一個TreeAction，寫一個Treejson方法，返回success，呼叫業務，返回listre。public List<Tree> findTre(Integer id) { List<Tree> listre = (List<Tree>) hibernateTemplate.find("from Tree where parentid = ?",id); return listre; }
配置hibernate.cfg.xml，test，xml及struts.xml。下邊是struts.xml的配置,裡面重要的是type屬性是json,param放值public String Treejson() { listre = comm.findTre(id); return SUCCESS; }最後一步在頁面配置，url傳的是action裡面的name<action name="Treejson" class="TreeAction" method="Treejson"> <result type="json" name="success">index.jsp <param name="root">listre</param> </result> </action>最終執行的效果就是開始的介面。<div class="easyui-panel" style="padding: 5px"> <ul class="easyui-tree" data-options="url:'Treejson',method:'get'"></ul> </div>
