easyui框架和显示（一）
生活随笔
收集整理的這篇文章主要介紹了
easyui框架和显示（一）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
easyui框架和顯示（一）
1、easyui介紹
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
easyui節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模。
2、easyui本次操作需要的工具和一些案例
1、一些工具名稱
2、jQuery EasyUI 官方API文檔中文版version 1.5
3、Easyui的導入
4、拷入之前的util類
6、從jQuery EasyUI 官方API文檔中文版version 1.5導入EasyUI的CSS和Javascript文件到您的頁面。
7、以及包
index.js
$(function() {$('#tt').tree({ url:'tree_data1.json' }); })3、easyui代碼
1、jsp.頁面顯示：通過layout布局
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/static/easyui5/themes/default/easyui.css"> <link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/static/easyui5/themes/icon.css"> <script type="text/javascript"src="${pageContext.request.contextPath }/static/easyui5/jquery.min.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath }/static/easyui5/jquery.easyui.min.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath }/static/js/index.js"></script><title>后臺展示</title> </head> <body class="easyui-layout"><div data-options="region:'north',border:false"style="height: 60px; background: #B3DFDA; padding: 10px">northregion</div><div data-options="region:'west',split:true,title:'West'"style="width: 150px; padding: 10px;">菜單管理<ul id="tt"></ul> </div><divdata-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;">southregion</div><div data-options="region:'center',title:'Center'"></div> </body>2、通過tree（樹形菜單）加載菜單
樹形(tree)的結構目錄 （tree_data1.json）
TreeNode（實體類）
package com.DZY.entity;import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;/*** 作用是通過TreeNode類轉成* tree——data1.json的字符串* @author DZY**/ public class TreeNode {private String id;private String text;private List<TreeNode> children = new ArrayList<>();private Map<String, Object> attributes = new HashMap<>();public String getId() {return id;}public void setId(String id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public List<TreeNode> getChildren() {return children;}public void setChildren(List<TreeNode> children) {this.children = children;}public Map<String, Object> getAttributes() {return attributes;}public void setAttributes(Map<String, Object> attributes) {this.attributes = attributes;}public TreeNode(String id, String text, List<TreeNode> children, Map<String, Object> attributes) {super();this.id = id;this.text = text;this.children = children;this.attributes = attributes;}public TreeNode() {super();}@Overridepublic String toString() {return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";}}MenuDao（繼承JsonBaseDao）
package com.DZY.dao;import java.sql.SQLException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;import com.DZY.entity.TreeNode; import com.DZY.util.JsonBaseDao; import com.DZY.util.JsonUtils; import com.DZY.util.PageBean; import com.DZY.util.StringUtils;public class MenuDao extends JsonBaseDao {/*** 給前臺返回tree_data1.json的字符串* @param paMap 從前臺jsp傳遞過來的參數(shù)集合* @param pageBean* @return* @throws SQLException * @throws IllegalAccessException * @throws InstantiationException */public List<TreeNode> listTreeNode(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{List<Map<String, Object>> listMap = this.listMap(paMap, pageBean);List<TreeNode> listTreeNode = new ArrayList<>();this.listMapToListTreeNode(listMap, listTreeNode);return listTreeNode;}/*** [{'menuId':001,'menuName':'學生管理'},{{'menuId':001,'menuName':'后勤管理'}}]* @param paMap* @param pageBean* @return* @throws InstantiationException* @throws IllegalAccessException* @throws SQLException*/public List<Map<String, Object>> listMap(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{String sql = "select * from t_easyui_menu where true";String menuId = JsonUtils.getParamVal(paMap, "Menuid");if(StringUtils.isNotBlank(menuId)) {sql += " and parentid="+menuId;}else {sql += " and parentid=-1";} // 這里面存放的是數(shù)據(jù)庫中的菜單信息List<Map<String, Object>> listMap = super.executeQuery(sql, pageBean);return listMap;}/*** {'menuId':001,'menuName':'學生管理'}* --->* {id:....,text:....}* @param map* @param treeNode* @throws SQLException * @throws IllegalAccessException * @throws InstantiationException */private void mapToTreeNode(Map<String, Object> map, TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {treeNode.setId(map.get("Menuid")+"");treeNode.setText(map.get("Menuname")+"");treeNode.setAttributes(map); // 將子節(jié)點添加到父節(jié)點當中，建立數(shù)據(jù)之間的父子關系 // treeNode.setChildren(children);Map<String, String[]> childrenMap = new HashMap<>();childrenMap.put("Menuid", new String[] {treeNode.getId()});List<Map<String, Object>> listMap = this.listMap(childrenMap, null);List<TreeNode> listTreeNode = new ArrayList<>();this.listMapToListTreeNode(listMap, listTreeNode);treeNode.setChildren(listTreeNode);}/*** [{'menuId':001,'menuName':'學生管理'},{{'menuId':001,'menuName':'后勤管理'}}]* -->* tree_data1.json* @param listMap* @param listTreeNode* @throws SQLException * @throws IllegalAccessException * @throws InstantiationException */private void listMapToListTreeNode(List<Map<String, Object>> listMap, List<TreeNode> listTreeNode) throws InstantiationException, IllegalAccessException, SQLException {TreeNode treeNode = null;for (Map<String, Object> map : listMap) {treeNode = new TreeNode();mapToTreeNode(map, treeNode);listTreeNode.add(treeNode);}} }MenuAction （繼承ActionSupport ）
public class MenuAction extends ActionSupport {private MenuDao menuDao = new MenuDao();public String menuTree(HttpServletRequest req,HttpServletResponse resp) {ObjectMapper om = new ObjectMapper();try { // 獲取到easyui框架所識別的json格式List<TreeNode> listTreeNode = this.menuDao.listTreeNode(req.getParameterMap(), null);ResponseUtil.write(resp, om.writeValueAsString(listTreeNode));} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;} }mvc.xml配置
<config><action path="/menuAction" type="com.DZY.web.MenuAction"></action><action path="/userAction" type="com.DZY.web.UserAction"><forward name="index" path="/index.jsp" redirect="false" /></action> </config>界面效果：
3、Tabs（通過菜單去打開不同的tab頁）
選項卡顯示一批面板。但在同一個時間只會顯示一個面板。每個選項卡面板都有頭標題和一些小的按鈕工具菜單，包括關閉按鈕和其他自定義按鈕。
index
$(function() {$('#tt').tree({ url:'menuAction.action?methodName=menuTree',onClick: function(node){alert(node.text); // 在用戶點擊的時候提示// add a new tab panel $.extendsvar content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';if($('#menuTab').tabs('exists',node.text)){ // 存在執(zhí)行選項卡選中已有的選項卡操作$('#menuTab').tabs('select',node.text);}else{ // 不存在執(zhí)行新增的操作$('#menuTab').tabs('add',{ title:node.text, content:content, closable:true }); } }}); })總結
以上是生活随笔為你收集整理的easyui框架和显示（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于Easyui框架的datagrid绑
- 下一篇： EasyUI框架04——treegrid