一.完成了高级分页查询
1.1 分页查询
1.1.1 准备分页条 pagination:true
<table class="easyui-datagrid" id="employeeDataGrid"
data-options="... pagination:true">
...
1.1.2 后台返回分页数据
- 需要返回的结构:
{total:23,rows:[...]}
- 准备相应的
UIPage
类
public class UIPage<T> {
private Long total; //总条数
private List<T> rows; //每页数据
public UIPage(Page page) {
total = page.getTotalElements();
rows = page.getContent();
}
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
}
-
EmployeeController
中添加返回UIPage
的方法
/**
* 准备分页方法
* @param query
* @return
*/
@RequestMapping("/page")
@ResponseBody
public UIPage page(EmployeeQuery query){
//return employeeService.queryPage(query);
return new UIPage(employeeService.queryPage(query));
}
1.1.3 后台接收分页数据
- 我们必需保证前台传的数据(当前页与每页条数)和咱们后台的Query中的名称相同
BaseQuery
中做修改
//兼容easyui的分页 ctrl+f9
public void setPage(int currentPage) {
this.currentPage = currentPage;
}
public void setRows(int pageSize) {
this.pageSize = pageSize;
}
1.2 完善咱们的Employee功能
1.2.1 完成Department的CRUD
- 拷备
Employee
再写一份即可 - 代码略(靠自己)
1.2.2 Employee对象
@Entity
@Table(name = "employee")
public class Employee extends BaseDomain {
...
//头像
private String headImage;
//部门
/**
* hibernate自动为懒加载对象加上了一些属性
* 但是这几个属性在SpringMVC生成json数据的数据,就会报错(No serializer)
* Ignore:忽视
*/
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "department_id")
//@JsonIgnoreProperties(value={"hibernateLazyInitializer","handler","fieldHandler"})
private Department department;
...
}
1.2.3 懒加载引发的血案
1.2.3.1 noSession
- EntityManager提前关系了
- web.xml中配置Spring的过滤器
<!--解决no-session的问题-->
<filter>
<filter-name>openEntityManager</filter-name>
<filter-class>org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>openEntityManager</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
1.2.3.2 noSerializer
- hibernate添加了一些字段(变成Json时报错)
- 解决方案一: 字段上加注解
@JsonIgnoreProperties(value={"hibernateLazyInitializer","handler","fieldHandler"})
- 解决方案二:自己配置(拷备过来用即可)
- CustomMapper
public class CustomMapper extends ObjectMapper {
public CustomMapper() {
this.setSerializationInclusion(JsonInclude.Include.NON_NULL);
// 设置 SerializationFeature.FAIL_ON_EMPTY_BEANS 为 false
this.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
}
}
- applicationContext-mvc.xml
<!-- Spring MVC 配置 -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>application/json; charset=UTF-8</value>
<value>application/x-www-form-urlencoded; charset=UTF-8</value>
</list>
</property>
<!-- No serializer:配置 objectMapper 为我们自定义扩展后的 CustomMapper,解决了返回对象有关系对象的报错问题 -->
<property name="objectMapper">
<bean class="cn.itsource.aisell.common.CustomMapper"></bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
1.2.4 头像与部门的显示
-
employee.js
加上format的方法
/**
*
* @param v(value) :当前的数据
* @param r(row) : 当前行的数据
* @param i(index) :索引
* @returns {string}
*/
function imageFormat(v,r,i) {
return `<img src='${v}' style="width:60px;height:60px;">`;
}
//部门的格式化
function deptFormat(v) {
return v?v.name:"";
}
- employee中的index.js 使用format方法
<table class="easyui-datagrid" id="employeeDataGrid"
data-options="url:'/employee/page',fitColumns:true,singleSelect:true,fit:true,toolbar:'#toolbar',pagination:true">
<thead>
...
<th data-options="field:'headImage',width:100,formatter:imageFormat">头像</th>
...
<th data-options="field:'department',width:100,formatter:deptFormat">部门</th>
</tr>
</thead>
</table>
1.3 高级查询
1.3.1 准备高级查询的条件
<div id="toolbar">
...
<form id="searchForm" method="post">
用户名: <input name="username" class="easyui-textbox" style="width:80px">
邮箱: <input name="email" class="easyui-textbox" style="width:80px">
部门: <input class="easyui-combobox" name="departmentId"
data-options="valueField:'id',textField:'name',url:'/department/findAll',panelHeight:'auto'" />
<a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</form>
</div>
1.3.2 准备search方法
注:我们引入了jquery的扩展js(
jquery.jdirk.js
)才有serializeObject方法
itsource = {
...
//高级查询
search(){
//JQuery没有提供拿到json格式的数据
//直接拿到要查询的值 {username:xx,...}
var params =searchForm.serializeObject();
// //grid刷新
employeeDataGrid.datagrid('load',params);
}
};
二.删除功能
2.1 准备一个JsonResult类型
/**
* 删除返回的信息
*/
public class JsonResult {
//代表是否成功
private boolean success = true;
//代表相应的信息(一般是错误信息)
private String msg;
public JsonResult(){}
public JsonResult(boolean success, String msg) {
this.success = success;
this.msg = msg;
}
...
}
2.2 EmployeeController提供删除功能
/**
* 前台会传一个id过来
* 需要返回:{success:true/false,msg:"xx"}
* 返回这种结构有两种方法:1种是写map, 1种是直接返回对象
*/
@RequestMapping("/delete")
@ResponseBody
public JsonResult delete(Long id){
try {
employeeService.delete(id);
return new JsonResult();
} catch (Exception e) {
e.printStackTrace();
//失败后返回的结果
return new JsonResult(false,e.getMessage());
}
}
2.3 employee.js完成删除
delete () {
//1.拿到你选择的那一条数据 (easyui的datagrid中有这个功能)
// row就是你选择的这一行的数据
var row = employeeDataGrid.datagrid("getSelected");
//2.如果没有拿到数据,给一个提示,让他选中再执行(后面的代码就不运行) Messager alert
if(row==null){
//alert("没有货,滚蛋!"); //不建议使用 1.不同浏览器效果不一样 2.它会阻塞进程
$.messager.alert('警告','没有货,滚蛋!',"info");
return;
}
//3.如果拿到数据,给一个提示,是否要删除? Messager confirm
$.messager.confirm('确认','您要狠心的干掉我嘛?',function(r){
if (r){
//4.如果要删除 -> 发送Ajax请求到后台进行数据删除 $.get/post("/employee/delete",{id:2},function(){....})
// 后台会返回相应的数据 :{success:true/false,msg:xxx}
// 如果成功,刷新datagrid
$.get("/employee/delete",{id:row.id},function (result) {
if(result.success){
//删除成功,刷新datagrid
employeeDataGrid.datagrid("reload");
}else{
//删除失败,给出失败提示
$.messager.alert('失败','删除没有成功,原因是:'+result.msg,"error");
}
})
}
});
},
三.添加功能
3.1 准备添加的弹窗
<%--添加或者修改的弹出框--%>
<div id="editDialog" class="easyui-dialog" title="数据操作" style="padding: 25px; "
data-options="iconCls:'icon-save',resizable:true,modal:true,buttons:'#btns',closed:true">
<form id="editForm" method="post">
<table>
<tr>
<td>名称</td>
<td><input class="easyui-validatebox" type="text" name="username" data-options="required:true" /></td>
</tr>
<tr>
<td>密码</td>
<td><input class="easyui-validatebox" type="text" name="password" data-options="required:true" /></td>
</tr>
<tr>
<td> 邮箱</td>
<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true" /></td>
</tr>
<tr>
<td> 年龄</td>
<td><input class="easyui-validatebox" type="text" name="age" data-options="required:true" /></td>
</tr>
<tr>
<td> 部门</td>
<td>
<input class="easyui-combobox" name="department.id"
data-options="valueField:'id',textField:'name',url:'/department/findAll',panelHeight:'auto',required:true" />
</td>
</tr>
</table>
</form>
<div id="btns">
<a href="javascript:;" data-method="save" class="easyui-linkbutton c2" data-options="iconCls:'icon-ok'">确定</a>
<a href="javascript:;" data-method="close" class="easyui-linkbutton c5" data-options="iconCls:'icon-cancel'">取消</a>
</div>
</div>
3.2 点击添加弹出容器
//添加(只是弹出form)
add(){
//打开面板前把里面的数据清除
editForm.form("clear");
//把添加框(editDialog)打开
editDialog.dialog("center").dialog("open");
}
3.3 后台准备添加功能
/**
* 前台会传相应的数据(Employee)过来
* 需要返回:JsonResult{success:true/false,msg:"xx"}
*/
@RequestMapping("/save")
@ResponseBody
public JsonResult save(Employee employee){
try {
employeeService.save(employee);
return new JsonResult();
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(false,e.getMessage());
}
}
3.4 前台提交form表单
save(){
/**
* 1.把表单数据传到后台
* 2.如果后台保存成功,返回{success:true},刷新页面
* 失败:返回{success:false,msg:xxx}
* 3.关闭弹出框
*/
/**
* 1.把表单数据传到后台
*/
editForm.form('submit', {
url:"/employee/save", //提交的路径
//提交前做点什么 如果返回false,它就不提交数据
onSubmit: function(){
// do some check
// return false to prevent submit;
return $(this).form('validate');
},
//data是一个json字符串
success:function(data){
// {"success":true}
//把一个Json字符串转成JSON对象
//eval("("+data+")")
var result = JSON.parse(data);
if(result.success){
//成功就刷新页面
employeeDataGrid.datagrid("reload");
}else{
$.messager.alert('警告',`添加失败,原因是:${result.msg}`,"info");
}
//关闭面板
itsource.close();
}
});
},
四.思考
- 如果没有选中,不能修改
- 选中后,点击修改,需要数据回显(部门回显看一下以前的代码)
- 修改需要传id