1. 课程介绍
- 1. Datagrid组件（掌握）
- 2. Dialog、form组件（掌握）
- 3. Layout、Tabs;（掌握）
- Datagrid组件
2.1. 部署运行pss启动无错
2.1.1. 记得打勾
2.1.2. 修改server.xml
2.2. 修改datagrid.jsp集成easyui
2.2.1. 拷贝原来easyui1 webapp下面的easyui文件夹
2.2.2. 拷贝原来easyui1 webapp下面的common.jsp里面的内容到datagrid.jsp
2.2.3. 先写linkbutton，看有无效果
2.3. 修改execute方法变成分页查询
2.3.1. 原来的代码没有分页
// 专门返回json数据
// 应该是发出一个ajax请求 http://localhost/datagrid_json.action
public String json() throws Exception {
// <param name="root">#map</param>
// 只拿前10条
putContext("map", employeeService.getAll().subList(0, 10));
// <result name="json" type="json">
return "json";
}
2.3.2. 今天的代码有分页
@Controller
@Scope("prototype")
public class DatagridAction extends BaseAction {
@Autowired
private IEmployeeService employeeService;
// 没有提供getter，setter方法
private EmployeeQuery baseQuery = new EmployeeQuery();
// 显示一个页面，不添加数据
// http://localhost/datagrid.action
@Override
public String execute() throws Exception {
return SUCCESS;
}
// 专门返回json数据
// 应该是发出一个ajax请求 http://localhost/datagrid_json.action
public String json() throws Exception {
// <param name="root">#map</param>
PageList<Employee> pageList = employeeService.findPageByQuery(baseQuery);
putContext("map", pageList);
// <result name="json" type="json">
return "json";
}
public EmployeeQuery getBaseQuery() {
return baseQuery;
}
public void setBaseQuery(EmployeeQuery baseQuery) {
this.baseQuery = baseQuery;
}
}
2.4. 处理输出的json数据
http://localhost:8080/datagrid_json.action
2.4.1. 输出多余的数据
2.4.2. 减少json数据输出
如果输出的json数据比较少，提高访问性能
对一些easyui datagrid不需要的属性进行不输出：只需要2个属性total,rows
在Employee标注注解
@JSON(serialize = false)//roles属性json不输出
public Set<Role> getRoles() {
return roles;
}
在PageList标注注解
@JSON(serialize = false) 很多属性都不输出
public int getTotalPage()
@JSON(name = "rows") 改名
public List getData() {
@JSON(name = "total") 改名
public int getTotalCount() {
2.4.3. 只输出需要的数据
2.5. 修改datagrid.jsp显示json数据
直接从
http://localhost:8888/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=
2.5.1. 拷贝datagrid的代码替换刚才linkbutton
<table id="dg" title="员工管理" class="easyui-datagrid" fit="true"
style=" 700px; height: 250px" url="/datagrid_json.action"
toolbar="#toolbar" pagination="true" rownumbers="true"
fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="50">编号</th>
<th field="username" width="50">用户名</th>
<th field="password" width="50">密码</th>
<th field="age" width="50">年龄</th>
<th field="email" width="50">Email</th>
<th field="headImage" width="50">头像</th>
<th field="department" width="50">部门名称</th>
</tr>
</thead>
</table>
2.5.2. 显示效果
2.6. 进行数据格式化-和原来自定义插件写的代码类似
2.6.1. 原来自定义插件代码
2.6.2. 怎样看easyui的文档来处理部门，头像的效果
2.6.3. 今天的代码
function ageFormat(value,row,index) {
// 单元格formatter(格式化器)函数，带3个参数：
// value：字段值。
// row：行记录数据。
// index: 行索引。
// console.debug(value);
// console.debug(row);
// console.debug(index);
return value < 30 ? '<font color="red">' + value + '</font>' : value;
}
2.6.4. 效果
2.7. 处理分页
2.7.1. 分析
json数据中已经输出了总的记录条
第一次提交参数：没有分页条件，默认提交
page 1
rows 10
第二次提交参数，手动改变切换到第二页
page 2
rows 10
2.7.2. 结论
page==baseQuery.currentPage,当前页码
rows=baseQuery.pageSize，一页显示的条数
2.7.3. 修改DatagridAction
添加easyui兼容代码,getter,setter
private int page=1;
private int rows=10;
public String json() throws Exception {
baseQuery.setCurrentPage(page);
baseQuery.setPageSize(rows);
PageList pageList = employeeService.findByQuery(baseQuery);
putContext("map", pageList);
return "jsonResult";// 不能返回页面，只能返回json视图===jsonResult
}
2.8. datagrid组件常用属性
<script type="text/javascript">
//会自动由easyui注入3个参数
// value当前列的值,row行的json数据,index索引
function deptFormat(value, row, index) {
// console.debug(value);
// console.debug(row);
// console.debug(index);
return value ? value.name : "";
}
function imageFormat(value, row, index) {
return value ? "<img src='"+value+"'/>" : "没有头像";
}
function ageFormat(value, row, index) {
return value < 30 ? "<font color='red'>" + value + "</font>" : value;
}
</script>
<title>Insert title here</title>
</head>
<body>
<!-- url="ajax方式获取json数据" -->
<!-- pagination="true"显示分页条 -->
<!-- rownumbers="true" 显示行号，数据的索引号 -->
<!-- fitColumns="true" 列占满-->
<!-- singleSelect="true"只能选择一行 -->
<!-- pageSize : 每页显示多少条数据; 默认值10-->
<!-- pageList array 在设置分页属性的时候 初始化页面大小选择列表。 [10,20,30,40,50],pageList="[10,20,50]" -->
<!-- width="10"，如果值是一样的，平分datagrid的宽度，最右边预留滚动条的宽度，如果此值比其他小，少占点宽度 -->
<!-- formatter,对列进行格式化输出，值写的是函数名称或者匿名函数 -->
<!-- 在那个列添加sortable="true"，额外提交2个参数， 1.order desc,asc;2.sort:age -->
<!-- hidden boolean 如果为true，则隐藏列,但是在row行json存在id的· -->
<table id="dg" title="员工管理" class="easyui-datagrid" fit="true"
url="/datagrid_json.action" toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="10" hidden="true">编号</th>
<th field="username" width="50">用户名</th>
<th field="password" width="50">密码</th>
<th field="age" formatter="ageFormat" width="50" sortable="true">年龄</th>
<th field="email" width="50">Email</th>
<th field="headImage" formatter="imageFormat" width="50">头像</th>
<th field="department" formatter="deptFormat" width="50">部门名称</th>
</tr>
</thead>
</table>
2.9. 处理datagrid上面工具条
<table toolbar="#toolbar"
不要把下面的div放到table的内部，放到外部
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="addEmployee()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="editEmployee()">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteEmployee()">删除</a>
</div>
function addEmployee() {
console.debug("add");
}
function editEmployee() {
console.debug("edit");
}
function deleteEmployee() {
console.debug("delete");
}
- 删除功能
3.1. 后台
// 从datagrid页面发出的ajax请求：删除方法,单个对象{},集合[{},{}]
public String delete() throws Exception {
Map<String, Object> map = new HashMap<String, Object>();
try {
employeeService.delete(id);
map.put("success", true);
} catch (Exception e) {
map.put("success", false);
map.put("msg", "异常：" + e.getMessage());
}
putContext("map", map);
return "json";// 不能返回页面，只能返回json视图===json
}
3.2. 前台
function deleteEmployee() {
console.debug("delete");
//调用datagrid组件的getSelected方法当前选中的只是一行
//getSelections none 返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
//getSelected none 返回第一个被选中的行或如果没有选中的行则返回null。
var row = $('#dg').datagrid('getSelected');
if (!row) {//没有选中
//提示信息
// $.messager.show({
// title : '提示信息',
// msg : '删除前必须选择一行',
// showType : 'fade',
// style : {
// right : '',
// bottom : ''
// }
// });
$.messager.alert('提示信息','删除前必须选择一行!','info');
return;
}
//row代表选中行的json数据
console.debug(row);
$.get("/datagrid_delete.action?id="+row.id,function(data){
if(data.success){//删除成功
//重新加载datagrid:调用datagrid组件的reload方法
//reload param 重载行。等同于'load'方法，但是它将保持在当前页。
$('#dg').datagrid('reload');//类似于原来的$("#domainFrom").submit()
}else{//删除失败
$.messager.alert('错误提示',data.msg,'error');
}
});
}
- 新增保存
4.1. 弹出对话框
modal="true" 定义是否将窗体显示为模式化窗口
<div id="dlg" class="easyui-dialog" style=" 350px" closed="true"
buttons="#dlg-buttons">
<form id="fm" method="post" novalidate
style="margin: 0; padding: 20px 50px">
<input type="hidden" name="id">
<div
style="margin-bottom: 20px; font-size: 14px; border-bottom: 1px solid #ccc">员工信息</div>
<table>
<tr>
<td>用户名：</td>
<td><input name="username" class="easyui-textbox"
required="true" style=" 100%"></td>
</tr>
<tr>
<td>密码：</td>
<td><input name="password" class="easyui-textbox"
required="true" style=" 100%"></td>
</tr>
<tr>
<td>年龄：</td>
<td><input name="age" class="easyui-textbox" required="true"
style=" 100%"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input name="email" class="easyui-textbox" data-options="validType:'email'"
style=" 100%"></td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6"
iconCls="icon-ok" onclick="saveEmployee()" style=" 90px">保存</a> <a
href="javascript:void(0)" class="easyui-linkbutton c8"
iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"
style=" 90px">取消</a>
</div>
4.2. 后台
// 从datagrid页面发出的ajax请求：保存方法
public String save() throws Exception {
Map<String, Object> map = new HashMap<String, Object>();
try {
employeeService.saveOrUpdate(employee);
map.put("success", true);
} catch (Exception e) {
map.put("success", false);
map.put("msg", "异常：" + e.getMessage());
}
putContext("map", map);
return "jsonResult";// 不能返回页面，只能返回json视图===jsonResult
}
// 不需要prepareInput方法，因为不做页面跳转,不做页面回显，前台回显：xxxForm.form('load',rows);
// public void prepareInput() throws Exception {
// }
// java.lang.IllegalArgumentException: attempt to create saveOrUpdate event
// with null entity
// 没有employee = new Employee();
public void prepareSave() throws Exception {
if (id == null) {
employee = new Employee();
} else {
employee = employeeService.get(id);//修改的时候防止数据丢失的
}
}
//显示添加页面
function addEmployee() {
console.debug("add");
//先把对话框里面的表单清空
$('#fm').form('clear');
//弹出一个对话框,修改对话框的标题
$('#dlg').dialog('open').dialog('setTitle','添加员工');
}
4.3. 修改保存
4.3.1. 前台js
//显示回显，修改页面
function editEmployee() {
console.debug("edit");
var row = $('#dg').datagrid('getSelected');
if (!row) {//没有选中
$.messager.alert('提示信息', '修改前必须选择一行!', 'info');
return;
}
//row代表选中行的json数据
console.debug(row);
//先把对话框里面的表单清空
$('#fm').form('clear');
//读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型row，如果是字符串则作为远程URL，否则作为本地记录。
$('#fm').form('load',row);
//弹出一个对话框,修改对话框的标题
$('#dlg').dialog('open').dialog('setTitle','修改员工');
}
4.3.2. 后台action
public void prepareSave() throws Exception {
if (id == null) {// 处理新增
employee = new Employee();// 实例化，把employee放到栈顶
} else {// 处理保存
employee = employeeService.get(id);// 实现数据不丢失
}
}
4.4. easyui内置验证插件
4.4.1. 单独写属性
class="easyui-validatebox" required="true" validType="email"
使用data-options
class="easyui-validatebox" data-options="required:true,validType:'email'"
必填+email格式
4.4.2. 源码分析
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
$.map(['validatebox','textbox','passwordbox','filebox','searchbox',
'combo','combobox','combogrid','combotree',
'datebox','datetimebox','numberbox',
'spinner','numberspinner','timespinner','datetimespinner'], function(plugin){
if ($.fn[plugin]){
$.fn[plugin].defaults.missingMessage = '该输入项为必输项';
}
});
if ($.fn.validatebox){
$.fn.validatebox.defaults.rules.email.message = '请输入有效的电子邮件地址';
$.fn.validatebox.defaults.rules.url.message = '请输入有效的URL地址';
$.fn.validatebox.defaults.rules.length.message = '输入内容长度必须介于{0}和{1}之间';
$.fn.validatebox.defaults.rules.remote.message = '请修正该字段';
}}
- 显示easyui的后台主页
5.1. 效果
5.2. Main2Action
/**
*
* easyui后台主页
*
*/
@Controller
@Scope("prototype")
public class Main2Action extends BaseAction {
// 显示后台主页
@Override
public String execute() throws Exception {
return SUCCESS;
}
}
5.3. struts.xml
<action name="main2_*" class="main2Action" method="{1}">
<result>/WEB-INF/views/main2.jsp</result>
</action>
5.4. 页面
- 实现全屏 <div class="easyui-layout" fit="true">
- 实现全屏 <body class="easyui-layout">
<body class="easyui-layout">
<div data-options="region:'north'" style="height: 50px">1北，图片logo</div>
<div data-options="region:'south',split:true" style="height: 50px;">2南，底部，公司版权信息</div>
<div data-options="region:'east',split:true" title="East"
style=" 180px;">3东，一般不要</div>
<div data-options="region:'west',split:true" title="West"
style=" 150px;">4西，菜单</div>
<div
data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
5，中，主体内容</div>
</body>
5.5. 显示左侧菜单
5.5.1. 显示静态菜单
拷贝easyui1项目里面11.组件三要素-事件.jsp案例部分内容
并且拷贝json文本文件：tree.text
5.5.2. 后台
@Autowired
private IMenuService menuService;
// 从后台主页发出ajax请求，获取菜单的json数据
public String menu() throws Exception {
Employee employee = (Employee) ActionContext.getContext().getSession().get(USER_IN_SESSION);
List<Menu> list = menuService.findByLoginUserId(getId());
putContext("map", list);
return "json";
}
5.5.3. Menu.java
@JSON(serialize = false)
public Menu getParent() {
@JSON(name = "iconCls")
public String getIcon() {
@JSON(name = "text")
public String getName() { 必须重启电脑
5.5.4. 显示动态菜单
5.6. 使用iframe显示点击页面的内容
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!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">
<!-- 默认easyui主题样式 -->
<link rel="stylesheet" type="text/css"
href="easyui/themes/default/easyui.css">
<!-- 图标样式 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- 颜色的样式 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
<!-- 必须先引入jQuery的核心js -->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- 在引入easyui的核心js：只需要引入一个就ok -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- 最后引入easyui的国际化的js-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#menu')
.tree(
{
animate : true,
url : 'main2_menu.action',
onClick : function(node) {
// 在用户点击的时候提示
//alert(node.text);
var url = node.url;
if (url) {
//点击node的名称
var text = node.text;
//location.href = url;
//exists which 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。
if ($('#tt').tabs('exists', text)) {
//显示点击的选项卡
//select which 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
$('#tt').tabs('select', text)
} else {
//增加选项卡
$('#tt')
.tabs(
'add',
{
title : text,
//content: '<div class="easyui-panel" style="padding:10px" href="'+url+'">Content</div>',只能加载body的内容
content : '<iframe src="'
+ url
+ '" frameborder="0" style="99%;height:99.5%"></iframe>',
closable : true
});
}
}
}
});
});
</script>
<title>xxxCRM项目小组</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height: 80px">北:logo标记</div>
<div data-options="region:'south',split:true" style="height: 50px;">南，底部，公司认证信息</div>
<div data-options="region:'east',split:true" title="East"
style=" 100px;">东，信息提示</div>
<div data-options="region:'west',split:true" title="West"
style=" 130px;">
西，菜单
<ul id="menu"></ul>
</div>
<div data-options="region:'center'">
<div id="tt" class="easyui-tabs" fit="true">
<div title="主体" style="padding: 10px">
<p style="font-size: 14px">jQuery EasyUI framework helps you
build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on
jQuery.</li>
<li>easyui provides essential functionality for building
modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code,
you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your
products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- 处理员工部门
6.1. 后台的Action添加方法
注入部门service
public String deptTree() throws Exception {
// <param name="root">#map</param>
putContext("map", departmentService.getAll());
// 必须返回json视图
// <result name="json" type="json">
return "json";
}
6.2. 页面下拉列表
<!-- valueField: 'id'传递到后台的值, textField: 'text',页面看到的内容 -->
<input id="deptCombobox" class="easyui-combobox" name="department.id"
data-options="
url:'datagrid_deptTree.action',
valueField: 'id',
textField: 'name'
">
6.3. 回显editEmployee
//表单里面的名称是department.id，row行json里面也有row.department.id
//row:{"age":11,"department":{"id":2,"name":"采购部"},"email":"","id":108,"password":"11","username":"111155"}
//额外处理下拉列表
if(row.department){//如果原来有部门
//row["department.id"]=row.department.id;
$('#deptCombobox').combobox('setValue', row.department.id);
}
6.4. prepareSave
public void prepareSave() throws Exception {
if (id == null) {
employee = new Employee();
} else {
employee = employeeService.get(id);//修改的时候防止数据丢失的
employee.setDepartment(null);
}
}
6.5. Save方法
public String save() throws Exception {
Map<String, Object> map = new HashMap<String, Object>();
map.put("success", false);
try {
System.err.println(employee.getDepartment());// not null
System.err.println(employee.getDepartment().getId());// null
Department department = employee.getDepartment();
if (department != null && department.getId() == null) {
employee.setDepartment(null);
}
employeeService.save(employee);
map.put("success", true);
map.put("msg", "保存成功");
} catch (Exception e) {
map.put("msg", "保存出现异常:" + e.getMessage());
}
// <result name="json" type="json">
putContext("map", map);
return "json";// 返回json视图
}
- 已经学习那些组件
panel，linkbutton，tree(标准的json字符串，兼容easyui：text，iconCls，children)
dialog，datagrid，form
layout，tabs
- 课程总结
8.1. 重点
- Datagrid crud+分页
- Easyui后台主页
8.2. 难点
- Js的大小写敏感的问题，json格式问题(如最后不能写,)
- 常见异常
{"msg":"保存出现异常:Target object must not be null; nested exception is java.lang.IllegalArgumentException: Target object must not be null","success":false}
如果在进行修改的时候
public void prepareSave() throws Exception {
if (id == null) {// 处理新增
employee = new Employee();// 实例化，把employee放到栈顶
} else {// 处理保存
employee = employeeService.get(id);// 实现数据不丢失
}
}