EasyUI
easyui使用
1.简介(实现)
封装大量的jQuery插件(简化ajax，jquery，css样式，布局)
（1）插件实现:
① HTML标签+插件的class样式
我是讲
② HTML标签+基于编程的插件实现
我是洪
js代码： $("#btn").linkbutton();
（2）插件内容：
属性：设置插件的样式，图标，宽度，高度
事件：单击事件，双击
方法：修改插件属性，状态
2.搭建easyUI环境、实现第一个esayUI插件
（1）搭建EasyUI的环境
资源文件介绍：
搭建环境的步骤：
① 导入需要的css样式文件：easyui.css、icon.css
② 导入相关的js文件
jquery.min.js
jquery.easyui.min.js
jquery.easyui-lang-zh_CN.js
③ 注意：themes中的文件相对路径不能变
（2）第一个插件
插件：按钮(linkbutton)
实现插件效果标准开发步骤[记住]
标签： 按钮
样式名(规范)： easyui-样式名
实例：
① 方式一：按钮
② 方式二：js插件名(调用插件方法)
$("选中超链接").插件名();
$("a").linkbutton();
3.easyUI的属性、事件、方法(重要)
HTML标签+样式：
HTML标签+编程插件方法：
（1）属性
基于标签规范：
<标签 class="easyui-样式名" data-options="属性名:值,属性名:值"> </标签>
基于编程的规范：
<标签 id="tag"></标签>
$("#tag").插件名( {
属性名:值,
属性名:值,
} );
（2）事件
基于标签的规范:
<标签 class="easyui-样式名" data-options="属性名:值,属性名:值, 事件名:事件函数名"></标签>
基于编程的方式:
<标签 id="tag"></标签>
$("#tag").插件名({
属性名:值,
事件名:事件函数名，
事件名:function(){
}
});
（3）方法
调用模板：$("标签").easyui插件('方法名',方法传入的参数);
例如:
$("a").linkbutton('resize',{width:300,height:100});
4.easyUI面板(panel)、窗口(window)、对话框(dialog)
（1）面板·Panel （使用div）
效果:
基于标签: HTML标签+easyui-样式名:
class样式名: easyui-panel
基于编程:$("").插件方法();
插件方法: $("div").panel();
示例代码:
（2）窗口·window （使用div）
样式名： easyui-window
插件方法名：$("div").window()
重要:
window继承panel, panel的属性、事件、方法都可以在window中使用
示例代码：
（3）对话框·dialog （使用div）
样式名： easyui-dialog
插件方法名：$("div").dialog()
示例代码：
5.easyUI消息框(messager:消息框、提示框、确认框)
① 消息框
$.messager.show({
属性名:值,
属性名:值
});
② 提示框
$.messager.alert({
属性名:值,
属性名:值
});
③ 确认框
$.messager.confirm({
属性名:值,
属性名:值
});
示例代码
① 消息框
② 提示框
③ 确认框
6.Form表单输入框相关(搜索等)、Form表单相关(重要:自动将数据加载到表单实例、登录实例)
（1）Form表单元素相关
① 文本输入框·textbox + 搜索
HTML标签： input:text
easyui插件： $("input").textbox();
搜索：如果是搜索输入框时：提交时的方法为onClickButton方法
$(“按钮组 选中搜索的选择器”).textbox({
prompt : “输入名字搜索”,
buttonText : “搜索”,
buttonIcon : “icon-search”,
onClickButton : function() {
//获取搜索文本内容提交
}
});
② 数字输入框·numberbox
HTML标签： input:text
easyui插件： $("input").numberbox();
③ 日期输入框·datebox
标签： input:text
easyui插件: $('input').datebox()
④ 文件选择框·filebox
标签：input:text
easyui插件：$("input").filebox()
（2）form表单[重要]
① 属性: 参考api
② 事件:
$("form").form({
onSubmit:function(){ //表单提交之前，运行
//return false; //禁用表单提交
//return true; //允许提交表单
},
success:function(str){ //表单提交完毕，且服务器正常响应回浏览器后，执行
//str参数，是服务器响应给浏览器的json字符串数据
var msg = JSON.parse(str);
}
});
③ 方法:
交表单的方法：$("from").form("submit");//默认异步请求，且只有表单符合验证要求才提交数据
清空表单方法：$("form").form("clear");//清空表单数据
将数据填充在表单中：
a：将js的json对象数据直接填充在表单中
注意： 要求：json对象中属性名必须和表单控件的name值保持一致
$("form").form('load',{json对象的数据});
b: 将控制器url响应回的对象的js串格式数据，转化为js对象，自动添冲表单中。
注意： 要求：响应的json对象中属性名必须和表单控件的name值保持一致
$("form").form('load',"响应json数据的控制器的uri");
实例(自动将对象属性加载到表单中)：
实例：
7.数据表格(datagrid:基本使用手册、展示表格数据)
（1）基本使用手册：更多需要查看api文档
（2）展示数据
① html标签：
| ID | 名字 | 性别 | 年龄 | 手机号 | 地址 | 操作 |
|---|
② easyui插件方法：$("#dg").datagrid();
③ 使用属性设置属性对应(以图书展示为例)：
<body>
8.数据表格(datagrid:添加、(批量)删除、修改、分页、排序操作)
（1）添加：div 里面有form表单
① 准备一个添加的 dialog：标题+宽度+遮罩+默认关闭+按钮+内部form表单
② 准备一个添加按钮，绑定事件：显示添加的dialog
③ 提交表单
④ 提交完毕执行seccess函数：
清空form
关闭dialog
刷新datagrid（reload）
显示执行结果
（2）删除(批量删除)
a. 单个删除：
① 传递数据id
② ajax发送删除请求
③ 执行成功，刷新当前datagrid，重新加载数据
④ 提示执行结果
b. 批量删除：
① 获得所有被选中的行数据的所有id
② 发送ajax请求，提交所有的id值
③ 删除成功之后，刷新datagrid数据
④ 提示执行结果
（3）修改
a. 显示修改
① 根据id获得对应数据，并填充在表单中
② 显示表单
b. 修改
① 提交表单数据
② success成功后关闭dialog
③ 刷新datagrid数据
④ 提示执行结果
（4）分页
Map<String, Object> map = new HashMap<String, Object>(); //封装分页所需要的对象
map.put("total", total); //total为long类型
map.put("rows", list); //list为分页后的list ，将map转化json对象响应
（5）排序
9.下拉框(combobox:单选、多选)、标签栏(tabs)
（1）下拉框
①
② $(“选择器”).combobox( {} );
（2）tabs
10.树(tree)
（1）以html方式创建tree
（2）url动态加载tree的每个节点
① tree指定一个属性：url
② 要求服务器端响应的数据
a. 数据必须是相应成数组形式的数据
b. 每个节点信息属性要求
id属性：
text属性： 节点显示的文本.
children属性: 子节点信息 ( {id text children} )
例如:
[
{id:"1000"，text:"图书", children: [{id:"10001",text:"小说"},{id:"10002",text:"计算机图书"}] },
{id:"2000"，text:"电子产品"},
{id:"3000"，text:"衣服"},
]
③ 通过标签引用url响应的结果，填充在tree中
$("#tree").tree({
url:"响应tree需要的数据的控制器路径uri"
});
使用：
① 节点事件
② 加载对象及节点属性
节点属性：
11.手风琴(accordion)、布局(layout)
（1）手风琴 accordion
① html标签
（2）布局 layout
效果：
使用：
插件名easyui-layout
处理代码：
① 实体：响应TreeNode实体所对应的json对象，tree插件接收后会自动对结果加载显示
public class TreeNode {
//属性名必须写tree控件定义好的key
private int id; //节点ID，对加载远程数据很重要
private String text; //显示节点文本
private String state="open"; //节点状态(展开与否)，'open' 或 'closed'，默认：'open'
private boolean checked; //表示该节点是否被选中
private Map attributes; //被添加到节点的自定义属性
private List
有无参构造、getters、setters省略
}
控制器：方法返回值为List
② 前端：layout布局的jsp页面代码(要引入easyUI样式)
</head>
<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:300px;">
<div id="aa" class="easyui-accordion" data-options="fit:true"> <!—手风琴-->
<div title="Title" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
<ul id="categoryTree"></ul>
</div>
<div title="Title2">
other…
</div>
</div>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="myTab"> <!—tabs-->
<div title="欢迎页" style="padding:20px;" data-options="closable:true">
欢迎使用页面
</div>
</div>
</div>
</body>
③ 前端：接收分类id，并将数据加载到datagrid中的展示页面
<head>
<script type="text/javascript">
$(function(){
$("#myDatagrid").datagrid({
url:"getBookByCategory",
queryParams:{"categoryid":${param.id}},
pagination:true,
title:"图书列表",
columns:[[
{title:"编号",field:"bookId"},
{title:"名字",field:"bookName"},
{title:"价格",field:"bookPrice"},
{title:"出版时间",field:"bookDate"}
]]
});
});
</script>
</head>
<body>
<table id="myDatagrid"></table>
</body>
本文来自博客园，作者：与乐i，转载请注明原文链接：https://www.cnblogs.com/linanana/p/12553365.html
