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、以及包

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

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）

[{"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配置

<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页）
选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

<div data-options="region:'center',title:'Center'"><div id="menuTab" class="easyui-tabs" style="width:500px;height:250px;">   <div title="首页" style="padding:20px;display:none;">欢迎界面</div>    </div>

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框架和显示（一）相关推荐

基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
frame框架的显示隐藏操作 (转)
下面是主要代码: index.htm <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT=&q ...
EasyUI框架入门学习
为什么80%的码农都做不了架构师?>>> 前言新项目的开发前端技术打算采用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给 ...
基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）
从这篇博客,我会一步步的为大家讲解,easyui框架中最常用的一个控件datagrid.在使用easyui框架时,datagrid是使用最多的控件,它不仅好用,关键是实用. 我为大家建立一个博客更新的 ...
快速开发框架，及库存管理系统，基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。...
快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...
js高级jQuery框架easyUI框架
js高级与easyUI框架一.JavaScript高级 1.ajax请求 ajax:局部刷新技术使用场景:分页数据的刷新,二级联动,验证用户名是否重复,地图局部刷新核心对象: JavaScrip ...
easyui框架下table，每行实现上下移动
easyui框架的控件功能做得很好,用得最多的是table,很多时候我们需要对每行的数据进行上下移动的排序,这里主要通过js函数来实现,请往下看. //上移 function danganconf_s ...
VUE cli3 搭建vue项目引入EasyUI框架，出现错误！！！You are using the runtime-only build of Vue where the template com
EasyUI框架是我本科时候后端开发的一个前端框架,用起来比较方便,缺点就是风格.颜色.主题不太行,但是现在济南的很所公司还用easyui开发呢!!本文主要在这里记录一下主要的配置情况,对程序员来说, ...
解决HTML框架不能显示的问题
解决HTML框架不能显示的问题修改代码之前: <!DOCTYPE html PUBLIC"_//W3C//DTD HTML 4.0.1 frameset//EN" ...
php中scrolling,如何设置浮动框架是否显示滚动条scrolling？
在上篇文章中,我们了解了iframe是什么意思啊?浮动框架iframe详解,然而很多人不知道如何设置浮动框架是否显示滚动条scrolling?下面我们来讲解一下scrolling 属性? 一:什么是s ...

easyui框架和显示（一）

easyui框架和显示（一）

easyui框架和显示（一）相关推荐

最新文章

热门文章