easyui入门

我是曾老师

于 2018-09-25 17:09:56 发布

阅读量170

点赞数

分类专栏： jQuery 文章标签： easyui jquery

本文链接：https://blog.csdn.net/qq_41097820/article/details/82841347

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.ui框架

easyui=jquery+html4（用来做后台的管理界面）

bootstrap=jquery+html5

layui

2.EasyUI

2.1准备工作

将EasyUI下载好的EasyUI程序库放入到项目内，

导入EasyUI的CSS和Javascript文件到您的页面：

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

（注：以项目的实际路径为基准 !）

2.2 layui 布局

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

2.3 tree 树

树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>

树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

<ul id="tt"></ul>

$('#tt').tree({    
    url:'tree_data.json'   
});

url可为Web Services的json数据

注：这里需要注意一下json的格式：

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

结构以及键的名称都要一致。

2.4 tabs 选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>     
</div>

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
});

添加一个新的包含小工具菜单的选项卡面板。

$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true
});

( 温馨提示：easyui的代码照着API帮助文档直接copy就行了，上面都有的！ )

jQuery EasyUI 官方API文档中文版下载

3.后台处理json字符串格式

由于 easyui中的 tree组件对json字符串的格式有要求，所以我们需要的数据库查出来的信息进行处理！

3.1 创建一个实体类（）：

package com.zking.entity;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class Menu {

	private String id;
	private String text;
	private List<Menu> 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<Menu> getChildren() {
		return children;
	}

	public void setChildren(List<Menu> children) {
		this.children = children;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public Menu(String id, String text, List<Menu> children, Map<String, Object> attribute) {
		super();
		this.id = id;
		this.text = text;
		this.children = children;
		this.attributes = attribute;
	}

	public Menu() {
		super();
	}

	@Override
	public String toString() {
		return "Menu [id=" + id + ", text=" + text + ", children=" + children + ", attribute=" + attributes + "]";
	}

}

3.2 主要思路其实就是为了返回一个菜单的集合，menuListToNodeList（）方法用于将实体加入到集合内，而menuToNode（）方法则是初始化菜单实体，具体代码如下：

package com.zking.dao.impl;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zking.dao.IMenuDao;
import com.zking.entity.Menu;
import com.zking.servlet.JsonEntityBaseDao;
import com.zking.util.JsonUtils;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class MenuDaoImpl extends JsonEntityBaseDao implements IMenuDao {
	/**
	 * 根据给定条件 查询数据库信息
	 * 
	 * @param map
	 *            查询的参数
	 * @param pb
	 *            分页的信息
	 * @return
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws InstantiationException
	 * @throws SQLException
	 */
	@Override
	public List<Map<String, Object>> queryMenu(Map<String, String[]> map, PageBean pb)
			throws IllegalArgumentException, IllegalAccessException, InstantiationException, SQLException {
		String menuid =JsonUtils.getValueByKey(map, "Menuid");
		String sql = "select * from t_easyui_menu where true";
		if (!StringUtils.isBlank(menuid)) {
			sql += " and parentid=" + menuid;
		} else {
			sql += " and parentid=-1";
		}
		return super.executeQuery(sql, pb);
	}

	/**
	 * 初始化一个menu菜单，
	 * 
	 * @param map
	 *            格式不正确的菜单Map对象
	 * @param menu
	 *            格式正确的菜单实体
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws InstantiationException
	 * @throws SQLException
	 */
	private void menuToNode(Map<String, Object> map, Menu menu)
			throws IllegalArgumentException, IllegalAccessException, InstantiationException, SQLException {
		menu.setId(map.get("Menuid").toString());
		menu.setText(map.get("Menuname").toString());
		menu.setAttributes(map);

		Map<String, String[]> param = new HashMap<>();
		param.put("Menuid", new String[] {menu.getId()});
		List<Map<String, Object>> queryMenu = this.queryMenu(param, null);
		List<Menu> nodeList = new ArrayList<>();
		menuListToNodeList(queryMenu, nodeList);
		menu.setChildren(nodeList);
	}

	/**
	 * 该方法将传入的Menu集合初始化为同级的菜单目录数据 （可用于顶级菜单的展示以及子项的初始化）
	 * 
	 * @param listMap
	 *            格式不正确的菜单Map集合
	 * @param listMenu
	 *            格式正确的菜单实体集合
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws InstantiationException
	 * @throws SQLException
	 */
	private void menuListToNodeList(List<Map<String, Object>> listMap, List<Menu> listMenu)
			throws IllegalArgumentException, IllegalAccessException, InstantiationException, SQLException {
		Menu menu = null;
		for (Map<String, Object> map : listMap) {
			menu = new Menu();
			menuToNode(map, menu);
			listMenu.add(menu);
		}
	}

	/**
	 * 由于easyui的tree组件的json是有格式要求以及命名要求的， 所以需转换格式
	 * 主要思路：1、可以把它想象成一个Menu的list集合，且将该集合初始化 
	 * 		  2、开始初始化：将数据库的值填入Menu内，且按照父子关系 从父到子依顺序填入
	 * 
	 * @throws SQLException
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws IllegalArgumentException
	 */
	@Override
	public List<Menu> getMenuNode(Map<String, String[]> map, PageBean pb)
			throws IllegalArgumentException, IllegalAccessException, InstantiationException, SQLException {
		List<Map<String, Object>> queryMenu = this.queryMenu(map, pb);
		List<Menu> listMenu = new ArrayList<>();
		this.menuListToNodeList(queryMenu, listMenu);
		return listMenu;
	}
}

我是曾老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui入门

1.ui框架easyui=jquery+html4（用来做后台的管理界面）bootstrap=jquery+html5layui2.EasyUI2.1准备工作将EasyUI下载好的EasyUI程序库放入到项目内，导入EasyUI的CSS和Javascript文件到您的页面：&lt;link rel="stylesheet" type="text/css" href...
复制链接

扫一扫

专栏目录