當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

easyui框架和显示（一）

發布時間：2023/12/2 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 easyui框架和显示（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

easyui框架和顯示（一）

1、easyui介紹

easyui是一種基于jQuery的用戶界面插件集合。

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui節省您網頁開發的時間和規模。

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布局

2、通過tree（樹形菜單）加載菜單
樹形(tree)的結構目錄（tree_data1.json）

[{"id":1,"text":"菜單管理","children":[{"id":11,"text":"財務","state":"closed","children":[{"id":111,"text":"日常報銷"},{"id":112,"text":"Wife"},{"id":113,"text":"Company"}]},{"id":12,"text":"后勤","children":[{"id":121,"text":"Intel"},{"id":122,"text":"費用繳納","attributes":{"p1":"Custom Attribute1","p2":"Custom Attribute2"}},{"id":123,"text":"Microsoft Office"},{"id":124,"text":"Games","checked":true}]},{"id":13,"text":"index.html"},{"id":14,"text":"about.html"},{"id":15,"text":"welcome.html"}] }]

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傳遞過來的參數集合* @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";} // 這里面存放的是數據庫中的菜單信息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); // 將子節點添加到父節點當中，建立數據之間的父子關系 // 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配置

界面效果：

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)){ // 存在執行選項卡選中已有的選項卡操作$('#menuTab').tabs('select',node.text);}else{ // 不存在執行新增的操作$('#menuTab').tabs('add',{ title:node.text, content:content, closable:true }); } }}); })

總結

以上是生活随笔為你收集整理的easyui框架和显示（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于Easyui框架的datagrid绑
下一篇： EasyUI框架04——treegrid