easyui_easyui模板 - CSDN
精华内容
参与话题
  • MVC5提升篇》基础课程后的,第一门关于MVC5+EasyUI实战基础的课程,主要内容包含:环境搭建,系统登录,用户管理等基础功能。     MVC全名是Model View Controller,是模型(model)-视图(view)...
  • 什么是EasyUi

    千次阅读 2019-03-24 20:02:43
    1、easyui是什么东西? easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就...
    1、easyui是什么东西?
    
    easyui是一种基于jQuery的用户界面插件集合。
    
    easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
    
    使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
    
    easyui是个完美支持HTML5网页的完整框架。
    
    easyui节省您网页开发的时间和规模。
    
    easyui很简单但功能强大的。
    
    2、官方网址
    
    http://www.jeasyui.net/
    
    下载
    
    http://www.jeasyui.com/download/list.php
    
     
    --------------------- 
    作者:程门立雪_ 
    来源:CSDN 
    原文:https://blog.csdn.net/sxj_world/article/details/81772050 
    版权声明:本文为博主原创文章,转载请附上博文链接!

     

    展开全文
  • EasyUI(一)

    万次阅读 2019-06-28 20:20:16
    什么是EasyUI? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解...

    什么是EasyUI?
    jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签

    EasyUI的特点:

    jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。

    1、基于jquery用户界面插件的集合
    2、为一些当前用于交互的js应用提供必要的功能
    3、EasyUI支持两种渲染方式分别为javascript方式(如:$(’#p’).panel({…}))和html标记方式(如:class=“easyui-panel”)
    4、支持HTML5(通过data-options属性)
    5、开发产品时可节省时间和资源
    6、简单,但很强大
    7、支持扩展,可根据自己的需求扩展控件
    8、目前各项不足正以版本递增的方式不断完善

    1.layout布局

    第一步:下载程序库并导入EasyUI的CSS和Javascript文件到页面

    jquery-easyui-1.5.1下载网址:http://www.jeasyui.com/download/v151.php

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

    可以用 ${pageContext.request.contextPath } 表示全路径名,以免路径出错

    注意:jquery.min.js必须必须用在jquery.easyui.min.js之前
    

    第二步:
    找到程序库中demo–>layout–>full.html
    在这里插入图片描述
    index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台主界面</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">   
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">
      
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>  
    </head>
    <body class="easyui-layout">
    	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
    	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
    	</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>
    </body>
    </html>
    

    2、tree菜单(具有展开、折叠、拖拽、编辑和异步加载等功能)

    TreeNode(实体类)

    package com.leiyuanlin.entity;
    /**
     * 作用是通过TreeNode类转换成
     * tree_data1.json的字符串
     * @author 2018101801
     *
     */
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    public class TreeNode {
    	private String id;
    	private String text;
    	private List<TreeNode> children = new ArrayList<>();
    	private Map<String, Object> attributes = new HashMap<>();
    	public TreeNode() {
    	}
    	public TreeNode(String id, String text, List<TreeNode> children, Map<String, Object> attributes) {
    		this.id = id;
    		this.text = text;
    		this.children = children;
    		this.attributes = attributes;
    	}
    	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;
    	}
    	@Override
    	public String toString() {
    		return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
    	}
    	
    }
    

    MenuDao(访问数据库)

    package com.leiyuanlin.dao;
    
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import com.leiyuanlin.entity.TreeNode;
    import com.leiyuanlin.util.JsonBaseDao;
    import com.leiyuanlin.util.JsonUtils;
    import com.leiyuanlin.util.PageBean;
    import com.leiyuanlin.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':002},{'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':002},{'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);
    		}
    	}
    	
    }
    

    这里为什么这么麻烦呢?
    其实数据库中表的数据不符合EasyUI树形展示的数据格式
    需要转换成easyUI所能识别的数据格式,只能识别:id,text,children…
    在这里插入图片描述
    MenuAction(将list集合转换成json串)

    package com.leiyuanlin.web;
    
    import java.util.List;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.leiyuanlin.dao.MenuDao;
    import com.leiyuanlin.entity.TreeNode;
    import com.leiyuanlin.framework.ActionSupport;
    import com.leiyuanlin.util.ResponseUtil;
    
    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) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    }
    

    配置mvc.xml

    <action path="/menuAction" type="com.leiyuanlin.web.MenuAction">
    </action>
    

    编写index.js

    $(function(){
    	$('#tt').tree({    
    	    url:'menuAction.action?methodName=menuTree',
    	});
    })
    

    index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台主界面</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">   
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">
      
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>  
    </head>
    <body class="easyui-layout">
    	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
    	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
    		菜单管理
    		<ul id="tt"></ul> 
    	</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>
    </body>
    </html>
    

    效果展示:
    在这里插入图片描述

    3、tabs布局

    接下来,我们将tree选中的标签显示在右侧

    需要改动的地方只有index.js和index.jsp页面

    index.js

    $(function(){
    	$('#tt').tree({    
    	    url:'menuAction.action?methodName=menuTree',
    	    onClick: function(node){
    //			alert(node.text);   在用户点击的时候提示
    			// add a new tab panel
    			var 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
    				}); 
    			}
    			
    		}
    
    	});
    	
    })
    

    index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台主界面</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">   
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">
      
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>  
    </head>
    <body class="easyui-layout">
    	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
    	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
    		菜单管理
    		<ul id="tt"></ul> 
    	</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 id="menuTab" class="easyui-tabs" style="">   
    	    <div title="首页" style="padding:20px;display:none;">   
    	       	 欢迎界面    
    	    </div>   
    </div>
    	
    	</div>
    </body>
    </html>
    

    效果图:
    在这里插入图片描述

    感谢观看!

    展开全文
  • EasyUI框架

    千次阅读 2019-08-22 13:34:24
    1.1 EasyUI是什么? EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库,封装了许多实用的控件和功能,并且是完美支持HTML5网页的框架。提供的控件包括数据表格,树形表格,菜单,进度条,选项卡,日期组合...

    一、概述

    1.1 EasyUI是什么?

    EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库,封装了许多实用的控件和功能,并且是完美支持HTML5网页的框架。提供的控件包括数据表格,树形表格,菜单,进度条,选项卡,日期组合框,调节器,对话框等等。

    EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript,也不要对CSS样式有深入的了解,开发者只需要了解一些简单的Html标签(table标签、form标签、div标签等)即可。

    EasyUI开发前端页面的好处:

    • 丰富的jQuery插件库
    • 使用简单,可以快速开发出原型界面
    • 支持html5,实现跨浏览器等等

    1.2 搭建开发环境

    下载地址:http://www.jeasyui.net

    下载完成后直接解压缩,其目录结构如下图所示:
    在这里插入图片描述
    在页面中引入下面文件:

    <link rel="stylesheet" href="css/themes/bootstrap/easyui.css" />
    <link rel="stylesheet" href="css/themes/icon.css" />
    <!--描述:easyui基础包-->
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js" ></script>
    <!--描述:中文包-->
    <script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js" ></script>
    

    1.3 入门示例

    <script type="text/javascript">
          $(function(){
                $.messager.alert("提示信息","这是我的第一个EasyUI程序","info");
          });
    </script>
    

    运行效果:
    在这里插入图片描述

    二、常用控件

    2.1 消息框

    messager提供了不同类型的消息框。例如:confirm、alert、p’rompt等等。所有消息框都是异步的,用户可以使用messager回调函数进行交互。

    (1)消息提示框

    <script type="text/javascript">
    	$(function(){
        	$.messager.show({
    			title:'消息提示',
    			msg:'添加数据成功',
    			showType:'slide',
    			timeout:2000
            });
       });
    </script>
    

    运行效果:
    在这里插入图片描述
    (2)消息警告框

    $.messager.alert('消息', '这里是消息文本的地方');
    

    运行效果:
    在这里插入图片描述
    (3)确认对话框

    $.messager.confirm('系统提示','确定要删除这条记录吗?',function(r){
         if(r){
              $.messager.alert('系统提示','确定删除','info');
         }
    });
    

    运行效果:
    在这里插入图片描述

    2.2 对话框

    对话框是一个特殊类型的窗口。它在顶部有一个工具栏,在底部有一个按钮栏。默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具(比如:可折叠 collapsible、可最小化 minimizable、可最大化 maximizable,等等)。

    • 创建对话框:

    方式一: 通过DOM节点标签创建;
    方式二:通过javascript脚本创建;

    (1)DOM节点创建对话框

    <div id="d1" class="easyui-dialog" title="DOM节点创建的方式" style="width: 400px;height: 200px;" data-options = "iconCls:'icon-save',resizable:true,modal:true">
         DOM节点创建的方式
    </div>
    

    运行效果:
    在这里插入图片描述
    对话框常用属性:

    • title:定义对话框标题,如:MyDialog
    • collapsible:定义是否显示可折叠按钮。默认:false(不显示)
    • minimizable:定义是否显示最小化按钮。默认:false(不显示)
    • maxmizable:定义是否显示最大化按钮。默认:false(不显示)
    • resizable:定义对话框窗口是否可以被拖拉缩放。默认:false(不可以)
    • closable:定义是否显示关闭按钮。默认:true(显示)
    • closed:定义是否在初始化组件时关闭(隐藏)窗口。默认:false(不隐藏)
    • modal:定义窗口是否带有遮罩效果。默认:true(有遮罩)
    • buttons:该对话框按钮通过数组定义。
    • href:定义引用的页面的url。

    (2)js脚本创建对话框

    //在body标签追加一个id=”dd”的div标签
    $('body').append('<div id="dd"></div>');
    $('#dd').dialog({
    	title:'My Dialog',
    	width:400,
                      height:200,
    	closed:false,
    	cache:false,
    	modal:true,
    	href:'index.html',
    	buttons:[{
    	      text:'保存', 
    	      handler:function(){$.messager.alert('系统提示','这里是点击保存触发的事件');}
    	},{
    	      text:'取消',handler:function(){$('#dd').dialog('destroy'); }
    	}]
    });
    

    注意:href属性只是引入被引用<body></body>标签之间的内容。所以被引入页面的css、js是继承使用父页面的。另外一个值得大家注意的地方是,父页面和子页面标签的id不能出现重复,否则会被替换。

    2.3 布局控件

    布局(layout)是有五个区域(北区 north、南区 south、东区 east、西区 west 和中区 center)的容器。中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板。

    例如:

    <div id="cc" class="easyui-layout" data-options="fit:true">   
        <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>   
    </div>
    

    运行效果:
    在这里插入图片描述

    属性说明:

    • title:布局面板的标题。默认为null(String),当为null或者不填写,布局自动隐藏折叠按钮;
    • region:定义布局面板的位置(方向),可以取下列值的其中之一:north、south、east、west、center;
    • border:设置为true将显示布局面板的边框。默认为true。
    • spilt:如果设置为true将显示一个分割条,用户可以拖动分割条来改变布局面板的尺寸。默认为false;
    • iconCls:一个用来显示布局面板头部图标的css类。默认为null;

    2.4 表格控件

    数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。

    创建表格的三种方式:

    • 从现有表格元素基础上创建DataGrid
    • 通过table标签创建DataGrid
    • 通过js脚本创建DataGrid

    2.4.1 从现有表格元素基础上创建DataGrid

    <table class="easyui-datagrid" data-options="fit:true">   
        <thead>   
            <tr>   
                <th data-options="field:'code'">编码</th>   
                <th data-options="field:'name'">名称</th>   
                <th data-options="field:'price'">价格</th>   
            </tr>   
        </thead>   
        <tbody>   
            <tr>   
                <td>001</td><td>name1</td><td>2323</td>   
            </tr>   
            <tr>   
                <td>002</td><td>name2</td><td>4612</td>   
            </tr>   
        </tbody>   
    </table>
    

    2.4.2 通过table标签创建DataGrid

    <table class="easyui-datagrid" 
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true,fit:true">   
        <thead>   
            <tr>   
                <th data-options="field:'code',width:100">编码</th>   
                <th data-options="field:'name',width:100">名称</th>   
                <th data-options="field:'price',width:100,align:'right'">价格</th>   
            </tr>   
        </thead>   
    </table>
    

    datagrid_data.json文件的内容是一个json数组格式的数据。

    [{
    	'code':1,
    	'name:'电冰箱',
    	‘price’:1999
    }, {
    	'code':2,
    	'name:'洗衣机',
    	‘price’:1599
    }, {
    	'code':3,
    	'name:'空调',
    	‘price’:2999
    }]
    

    2.4.3 通过js脚本创建DataGrid

    首先定义一个table标签。

    <table id="dg"></table>
    

    然后通过js脚本初始化表格。

    <script>
    $(function(){ 
    	$('#dg').datagrid({
    	    url:'datagrid_data.json',  
    	    method:'get',
    	    fit:true,  
    	    columns:[[    
    	        {field:'code',title:'编号',width:100},    
    	        {field:'name',title:'名称',width:100},    
    	        {field:'price',title:'价格',width:100,align:'right',formatter:function(value,row,index) {
    	        	return value + "元";
    	        }}    
    	    ]]
    	});  
    });
    </script>
    

    表格属性:

    • nowrap:当数据长度超出列宽时将会自动截取。默认true
    • idField:表示该列是唯一数据(id)。默认null
    • url:用于从远程站点请求数据的超链接地址。默认null
    • pagination:设置为true,将在表格的底部显示分页工具条。默认false
    • rownumbers:设置为true时,将显示行号。默认false
    • singleSelect:设置为true时,表示只能选中一行。默认false
    • toolbar:添加一个工具条
    • pagePosition:定义分页栏的位置。可用top、bottom(默认)、both。
    • pageNumber:分页的初始页面数。默认1
    • pageSize:初始化分页每页显示的条数。默认10
    • pageList:初始化分页每页记录数列表。默认[10,20,30,40,50]

    数据列属性:

    • title:列标题。默认undefined
    • field:列字段。默认undefined
    • width:列宽。默认undefined
    • rowspan:表示一个单元格可以跨越多少行。默认0
    • colspan:表示一个单元格可以跨越多少列。默认0
    • align:表示列数据对齐方式。可用left、center、right。默认left
    • checkbox:设置为true时,将在最前面显示复选框。默认false
    • formatter:格式化单元格函数有3个参数
    • value:字段值
    • rowData:行数据
    • rowIndex:行索引

    2.4.4 DataGrid的主要方法

    load:载入并显示第一页记录,通常用于执行条件查询功能;

    $('#table').datagrid('load', {'参数名':'参数值', ...});
    

    reload:重载表格数据,与load方法的功能相同。但是重载的是当前页面,而不是第一页;

    $('#table').datagrid('reload');
    

    getSelected:返回被选择的记录。例如:

    {
    	text:'修改',
    	iconCls:'icon-edit',
    	handler:function(){
    		var row = $('#dg').datagrid('getSelected');
    		$.messager.alert('你选择的值是:', row.code); 
    	}
    }
    

    2.5 Tree控件

    树形菜单用于web页面以一个树形结构显示分层数据,它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

    2.5.1 使用DOM标签创建Tree

    <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></ul>    
                </li>    
            </ul>   
        </li>   
        <li>   
            <span>File21</span>   
        </li>   
    </ul>
    

    2.5.2 js脚本创建Tree

    $(function(){
        $('#tt').tree({    
        	url:'tree_data.json'   
    	}); 
    });
    
    <ul id="tt"></ul>
    

    tree_data.json文件内容的数据格式:

    [{
    	"id":1,
    	"text":"My Documents",
    	"children":[{
    		"id":11,
    		"text":"Photos",
    		"state":"closed",
    		"children":[{
    			"id":111,
    			"text":"Friend"
    		},{
    			"id":112,
    			"text":"Wife"
    		},{
    			"id":113,
    			"text":"Company"
    		}]
    	},{
    		"id":12,
    		"text":"Program Files",
    		"children":[{
    			"id":121,
    			"text":"Intel"
    		},{
    			"id":122,
    			"text":"Java",
    			"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"
    	}]
    }]
    

    属性说明:

    • id:节点ID,对加载远程数据很重要。
    • text:显示节点文本。
    • state:节点状态,‘open’ 或 ‘closed’,默认:‘open’。如果为’closed’的时候,将不自动展开该节点。
    • checked:表示该节点是否被选中。
    • attributes: 被添加到节点的自定义属性。
    • children: 一个节点数组声明了若干节点。

    2.6 表单控件

    form控件提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候,还可以调用validate方法检查表单是否合法。

    <form id="ff" method="post">   
        <div>   
            <label for="name">Name:</label>   
            <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
        </div>   
        <div>   
            <label for="email">Email:</label>   
            <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />   
        </div>   
    </form> 
    

    2.6.1 验证框

    validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。

    • 创建验证框:

    方式一:通过DOM标签创建验证框

    <input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />
    

    方式二:通过js脚本创建验证框

    <input id="email" />
    
    $('#email').validatebox({
        required: true,    
        validType: 'email'   
    });
    

    运行效果:
    在这里插入图片描述
    完整代码:

    <body>
    	<script type="text/javascript">
    	   $(function(){
    	         $('#email').validatebox({    
    	               required: true,    
    	               validType: 'URL'   
    	         });
    	   });
    	</script>
    	
    	邮箱地址:<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /><br/>
    </body>
    
    

    2.6.2 输入框

    TextBox(文本框)是一个增强的输入字段组件, 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,如:combo,databox、spinner等。

    • 创建输入框:

    方式一:通过标签创建输入框

    <input class="easyui-textbox" data-options="iconCls:'icon-search',required: true" style="width:300px"> 
    

    方式二:通过js脚本创建输入框

    <input id="tt" />
    
    $('#tt').textbox({  
        required: true,  
        iconCls:'icon-man', 
        iconAlign:'left'          
    });
    

    运行效果:
    在这里插入图片描述
    完整代码:

    <body>
    	<script type="text/javascript">
    	    $(function(){
    			$('#tt1').textbox({    
    			     required: true,  //必填
    			     validType:'email',//验证邮箱
    			     buttonText:'搜索',//追加按钮
    			     iconCls:'icon-man', //追加图标
    			     iconAlign:'left'    //图标位置(left、right)     
    			});
    	    });
    	</script>
    	<form id="ff" method="post">   
    	     <div><label for="name">用户名:</label><input id="tt1"/></div>   
    	     <div><label for="password">密码:</label><input id="tt2" class="easyui-textbox" data-options="required:true" /></div>    
    	</form>  
    </body>
    

    2.6.3 数值输入框

    数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型,比如:数字、百分比、货币等。

    • 创建数值输入框:

    方式一:通过标签创建;

    <input class="easyui-numberbox" data-options="iconCls:'icon-search',required: true,min:0,precision:2" style="width:300px"> 
    

    方式二:通过js脚本创建;

    // 验证必填、最小值为0、有两位小数
    $('#tt').numberbox({ 
        required: true,  
        min:0,
        precision:2,
        iconAlign:'left'          
    });
    

    运行效果:
    在这里插入图片描述
    完整代码:

    <body>
    	<script type="text/javascript">
    	      $(function(){
    			 $('#tt1').numberbox({    
    			     required: true,  //必填
    			     min:0,//最小值 
    		         precision:2 //保留两位小数     
    		   });
    	    });
    	</script>
    	<form id="ff" method="post">   
    	     <div><label for="name">人数有:</label><input id="tt1" style="width:300px"/></div>   
    	     <div><label for="password">平均分:</label><input class="easyui-numberbox" data-options="iconCls:'icon-search',required: true,min:0,precision:2" style="width:300px"> </div>   
    	</form>  
    </body>
    

    2.6.4 日期输入框

    日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

    • 创建日期输入框:

    方式一:通过标签创建;

    <input id="dd" type="text" class="easyui-datebox" required="required"></input>  
    

    方式二:通过js脚本创建;

    <input id="tt" />
    
    $('#tt').datebox({    
        required: true        
    });
    

    运行效果:
    在这里插入图片描述
    完整代码:

    <body>
    	<script type="text/javascript">
    		$(function(){
    			$('#tt1').datebox({    
    		    	required: true  //必填   
    			});
    	    });
    	</script>
    	<form id="ff" method="post">   
    	     <div><label for="name">出生日期:</label>   
    	     <input id="tt1" style="width:300px"/></div>   
    	     <div><label for="password">入学时间:</label>   
    	     <input class="easyui-datebox" data-options="iconCls:'icon-search',required: true" style="width:300px"> </div>   
    	</form>  
    </body>
    

    2.6.5 下拉列表框

    下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

    • 创建下拉列表框:

    方式一:通过标签创建;

    <input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.json'" />
    

    get_data.json文件内容的格式:

    [{
    	"id":1,
    	"text":"Java",
    	"desc":"Write once, run anywhere"
    },{
    	"id":2,
    	"text":"C#",
    	"desc":"One of the programming languages designed for the Common Language Infrastructure"
    },{
    	"id":3,
    	"text":"Ruby",
    	"selected":true,
    	"desc":"A dynamic, reflective, general-purpose object-oriented programming language"
    },{
    	"id":4,
    	"text":"Perl",
    	"desc":"A high-level, general-purpose, interpreted, dynamic programming language"
    },{
    	"id":5,
    	"text":"Basic",
    	"desc":"A family of general-purpose, high-level programming languages"
    }]
    

    方式二:通过js脚本创建;

    <input id="cc" name="dept">  
    
    $('#cc').combobox({    
        url:'combobox_data.json',    
        valueField:'id',    
        textField:'text'   
    }); 
    

    方式三:通过select元素创建一个预定义结构的下拉框;

    <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">   
        <option value="aa">aitem1</option>   
        <option>bitem2</option>   
        <option>bitem3</option>   
        <option>ditem4</option>   
        <option>eitem5</option>   
    </select>   
    

    方式四:创建2个有依赖关系的下拉框;

    <input id="cc1" class="easyui-combobox" data-options="    
            valueField: 'id',    
            textField: 'text',    
            url: 'getData',    
            onSelect: function(rec){    
                var url = 'getData?id='+rec.id;    
                $('#cc2').combobox('reload', url);    
            }"/>   
    <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" /> 
    
    展开全文
  • EasyUI应用(项目实战)

    千人学习 2018-10-22 21:38:05
    jquery入门基础,jquery赋值取值,事件处理和绑定,提交数据,datagrid控件显示数据,分页,事件处理;Tabs控件动态创建多标签;datebox日期时间控件的赋值和取值;window弹出窗口应用;tree创建树形菜单,部门列表...
  • 【前端UI框架】EasyUI

    2019-07-24 18:29:39
    准备 下载:http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.5.zip ...div class="easyui-layout"> <div region="north" title="北部" style="height:100px">北部内容</div> ...

    准备

    下载:http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.5.zip
    在页面引入必要的资源

    布局

    <div class="easyui-layout">
        <div region="north" title="北部" style="height:100px">北部内容</div>
        <div region="west" title="西部" style="width:100px">西部内容</div>
        <div region="center" title="中部">中部</div>
        <div region="south" title="南部" style="height:100px">南部内容</div>
        <div region="east" title="东部" style="width:100px">东部内容</div>
    </div>

    折叠面板

    <!-- fit为真则占满父容器 -->
    <div class="easyui-accordion" fit="true">
        <!-- iconCls的值在icon.css里面选 -->
        <div title="面板一" iconCls="icon-ok">面板一</div>
        <div title="面板二">面板二</div>
        <div title="面板三">面板三</div>
    <div>

    标签页

    <div class="easyui-tabs" fit="true">
        <!-- closable为真则可关闭 -->
        <div title="标题一" closable="true">内容一</div>
        <div title="标题二">内容二</div>
        <div title="标题三">内容三</div>
    </div>

    树形菜单

    <ul class="easyui-tree">
        <li>
            <span>一级菜单1</span>
            <ul>
                <li>
                    <span>二级菜单1</span>
                    <ul>
                        <li><span>三级菜单1</span></li>
                        <li><span>三级菜单2</span></li>
                        <li><span>三级菜单3</span></li>
                    </ul>
                </li>
                <li><span>二级菜单2</span></li>
                <li><span>二级菜单3</span></li>
            </ul>
        </li>
        <li><span>一级菜单2</span></li>
    </ul>

    消息显示框

    $.messager.show({
        title: '标题',
        msg: '内容',
        timeout: 5000
        showType: 'slide'
    });

    消息弹出框

    $.messager.alert('标题', '内容', 'error'); // error, info, question, warning

    消息确认框

    $.messager.confirm('标题', 'xxx?', function(r) {
        if(r) { alert('xxx: ' + r); }
    });

    登录窗口

    <div id="w" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-save'" title="Login" style="width:300px;height:180px;">
    <form style="padding:10px 20px 10px 40px;">
        <p>Name: <input type="text"></p>
        <p>Pass: <input type="password"></p>
        <div style="padding:5px;text-align:center;">
            <a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a>
            <a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>
        </div>
    </form>
    </div>
    
    <div>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
    </div>

    表单校验

    <form id="ff" method="post">
    <div>
        <label for="name">Name:</label>
        <input class="easyui-validatebox" type="text" name="name" required="true"></input>
    </div>
    <div>
        <label for="email">Email:</label>
        <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
    </div>
    <div>
        <label for="subject">Subject:</label>
        <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
    </div>
    <div>
        <label for="message">Message:</label>
            <textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
    </form>

    转载于:https://www.cnblogs.com/hippiebaby/p/5493007.html

    展开全文
  • EasyUI

    2020-10-13 11:36:31
    jQuery EasyUI 一、jQuery EasyUI概述 (一)特点 1.帮助web开发者更轻松的打造出功能丰富并且美观的UI界面 2.easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合 3.easyui为创建现代化、互动、...
  • easyui+登录注册

    2020-07-29 14:20:26
    easyui datagrid
  • easyUi最新版

    2020-07-29 14:19:25
    easyUi最新版,性能优化,布局优化,功能优化,风格优化。
  • Easyui(一)

    千次阅读 2019-06-28 22:42:45
    1、Easyui介绍 Easyui是前端框架的一种 Easyui=jquery+html4(用来做后台的管理界面) 但是Easyui出现的比较久相对来说很少用了但是它相对的功能还是比较完善的; 想学好Easyui就必须先学好jquery!! 2、Easyui的...
  • 采用EasyUI 1.4.x 版本,默认default风格,异步加载页面,多Tab页展示,使用JSON文件模拟从后台动态获取数据。
  • EasyUI使用基础教程

    千次阅读 2018-11-29 11:55:22
    EasyUI简介 是建立在jQuery框架基础上的一个视图框架,主要处理视图逻辑、显示逻辑。 EasyUI是jQuery的一个插件组,EasyUI是jQuery的一个扩展。 使用EasyUI的前提是jQuery必须存在。 EasyUI是一个开源组织开发的,...
  • Easyui常用按钮图标汇总

    万次阅读 多人点赞 2018-01-29 21:03:11
    EasyUI常用图标:图标——名字 只要在icons属性上,加上图标对应的名字,easyUI就会显示对应的图标。
  • easyUI的form表单中有很多种类型的标签,easyui-validate、easyui-textbox、easyui-combox、easyui-datebox、easyUI-datetimebox等等。 在使用easyui-textbox时,想通过onblure()事件做一些处理,可是,事件总不被...
  • ![图片说明](https://img-ask.csdn.net/upload/201601/15/1452829099_474007.png) 就像实现这种格式和功能的easyUI 代码 求大神指教
  • 又一个媲美easyui的实用框架

    万次阅读 2015-01-25 15:14:15
    很实用的框架,而且还是免费的哦
  • easyUI 清空form表单

    万次阅读 2014-12-25 15:58:55
    $("#xx_form").form('clear');
  • Easyui修改LinkedButton的按钮文本

    万次阅读 2013-02-16 13:00:50
    $('#pauseCtrl').linkbutton({text:'暂停'});
  • easyui-textbox的onblur失去焦点事件

    万次阅读 2016-10-09 13:59:39
    easyUI的form表单中有很多种类型的标签,easyui-validate、easyui-textbox、easyui-combox、easyui-datebox、easyUI-datetimebox等等。 在使用easyui-textbox时,想通过onblure()事件做一些处理,可是,事件总不被...
  • easyUI 横向竖向分割线

    千次阅读 2014-05-23 16:42:35
    横向分割线
1 2 3 4 5 ... 20
收藏数 59,040
精华内容 23,616
关键字:

easyui