jQuery EasyUI Day1

关注

原创最新推荐文章于 2026-02-17 00:50:28 发布 291 阅读 AI 写同款· GEO 优化 ›

Day45 EasyUI 搭建后台登录界面和管理系统主界面 EasyUI介绍 1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。特点：基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ... 阅读详情

1 简介

1.1 EasyUI简介

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
Bootstrap – 响应式的jquery框架快速构建web程序的框架
** Easyui 就是基于jquery做界面的框架，上手容易，学习方式copy+edit**

1.2 官方网站

http://www.jeasyui.com 英文网
http://www.jeasyui.net/ 中文网

1.3 EasyUI框架项目结构

1.3.1 目录截图

在这里插入图片描述

1.3.2 子目录说明

demo :web案例
demo-mobile:移动端案例
locale:本地化（汉化包）
plugins:easyui所有插件
src:插件的源码，如果买了商业授权就有全部源码
themes：主题（皮肤），存放css,img
changlog.txt:升级日志
easyloader.js:内部实现了一个js加载器，根据应用的需求加载js文件，而不是一次性加载所有文件；
jquery.easyui.min.js:所有插件集的压缩文件
jquery.min.js : easyui当前版本兼容的jquery库

2 搭建easyui环境

2.1 web项目加入easyui的项目文件夹

2.2 新建一个网页

引入easyui需要的js和css

<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->   
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->   
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->      
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

3 创建组件

3.1 组件创建方式

3.1.1 通过HTML方式创建

语法

<div class="easyui-panel"></div>

3.1.2 通过JS方式创建

$(function(){
	$('#p1').panel({    
	  width:500,    
	  height:150,    
	  title: 'My Panel',    
	  tools: [{    
	    iconCls:'icon-add',    
	    handler:function(){alert('new')}    
	  },{    
	    iconCls:'icon-save',    
	    handler:function(){alert('save')}    
	  }]    
	}); 
})

3.2 easyui组件创建原理

平时写的class=“easyui-panel” --最终底层还是要调用 panel方法来创建

底层通过 $.parser.auto=ture
调用parse方法
循环页面的组件找到对应 easyui-panel
找到之后，调用 panel({})创建组件
panel底层组装html

4 easyui常用组件

4.1 panel – 面板

panel 属性
title：标题
padding：内容距离边框距离
iconCls：图标
collapsible：true 显示折叠按钮
minimizable：最小化
maximizable：最大化
closable： true 关闭按钮
tools ：引用工具比如 add和save图标
fit ：自适应父容器的大小如果为true 设置的宽度和高度没有效果
loadingMessage ：
href：加载文件内容

<div id="p" class="easyui-panel" title="面板1"
		style="width: 300px; height: 200px; padding: 10px;" 
		iconCls="icon-save"
		collapsible="true"
		minimizable="false"
		maximizable="true"
		closable="true"
		tools="#tt"
		fit="false"
		loadingMessage="加载中..."
		href="/xxx.txt"
		>
			<a class="easyui-linkbutton" iconCls="icon-add">添加</a>
			<a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>
<div id="tt">
	<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
	<a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>
</div>

4.2 LinkButton 按钮组件

linkbutton的属性说明:
iconCls:按钮图标
toggle：为true时允许用户切换其状态是被选中还是未选择结合group来使用在一组里面只能选中一个
plain ：简洁效果
iconAlign ：图标的位置
data-options ：可以设置组件的属性
disabled ：禁用
group ：分组

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮</a>
<a href="#" class="easyui-linkbutton" iconCls='icon-remove' toggle="true" onclick="alert('删除....');">删除</a>
<a href="#" class="easyui-linkbutton" iconCls='icon-edit' plain="true" iconAlign="right" id="editBtn">编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>

<div style="padding:5px;border:1px solid #ddd;">
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 3</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 4</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 5</a>
</div>

4.3 menu – 菜单

菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton和splitbutton。它还可以用于导航和执行命令。

4.4 tree --树型菜单

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能
在这里插入图片描述

4.4.1 节点属性：

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

[{    
    "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#"   
    }]    
}]