Spring MVC +JEasyUI datagrid 使用
2016-07-13 14:31
363 查看
EasyUI 官方API ：http://www.jeasyui.com/documentation/index.php#
前台页面： award_list.ftl
<#setting number_format="#">
<!DOCTYPE html>
<html class="no-js m">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit">
<title>Elottery后台管理系统</title>
<meta name="description" content="Elottery后台管理系统">
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/plugins/easyui/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/plugins/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/plugins/zeus/home.css?v=2016">
<script type="text/javascript" src="${rc.contextPath}/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/plugins/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/plugins/handlebars/handlebars.min-latest.js"></script>
<script type="text/javascript" src="${rc.contextPath}/plugins/elottery_admin/activity/award_list.js"></script>
</head>
<body class="easyui-layout zeus-body" style="padding:4px;">
<table id="awards_load">
</table>
</body>
</html>
在上面页面中导入了 JEasyUI和jQuery的.JS文件.以及对应的award_list.js
award_list.js文件
$(document).ready(function() {
function image(value, rec){
if(value != "" && value != null){
return "<img style=\"height: 80px;width: 80px;\" src=\""+value+"\"/>";
}else{
return "<img style=\"height: 80px;width: 80px;\" src='.'/>";;
}
};
$('#awards_load').datagrid({
title : '基础商品列表 ',
height: 750,
fitColumns: true,
url : 'awards',
singleSelect: false,
rownumbers: true,
pagination: true,
nowrap: false,
pageSize: 10,
pageList: [10, 20, 50, 100, 150, 200],
showFooter: true,
columns: [[
{ field: 'id',checkbox: true },
{ field: 'picUrl', title: '图片', width: 100, align: 'center',formatter:image},
{ field: 'name', title: '奖品名称', width: 100, align: 'center' },
{ field: 'memo', title: '奖品描述', width: 160, align: 'center' },
{ field: 'typeDesc', title: '奖品类型', width: 100, align: 'center' },
{ field: 'score', title: '兑换积分', width: 100, align: 'center' },
{ field: 'statusDesc', title: '状态', width: 100, align: 'center' },
]],
loadFilter:function(result) {
if(result.success){
return result.data;
}
}
});
});
AwardDataCtl控制器
@Controller
public class AwardDataCtl extends AbstractController {
//调用容器的包装工具
@Autowired
private ElotteryAdminBizFactory elotteryAdminBizFactory;
@RequestMapping(value = "/****/awards")
public @ResponseBody ResponseData getAllAward(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = "page",defaultValue="1") int page,
@RequestParam(value = "rows",defaultValue="10") int rows) {
IAwardService awardService = elotteryAdminBizFactory.getService(IAwardService.class);
Pagination<Award> result = awardService.pagingAwards(this.createPageRequest(page-1, rows, new Sort(Direction.DESC, "id")));
return ResponseData.newSuccess(result);
}
@RequestMapping(value = "/****/awards/{id}")
public @ResponseBody ResponseData getAwardById(HttpServletRequest request,HttpServletResponse response,@PathVariable("id") Long id) {
IAwardService awardService = elotteryAdminBizFactory.getService(IAwardService.class);
return ResponseData.newSuccess(awardService.getAwardById(id));
}
}
翻页结果集Pagination：
public class Pagination<T> {
private int currentPage;
private long total;
private List<T> rows;
private int totalPages;
public Pagination() {
this.total = 0;
this.totalPages = 0;
this.rows = Collections.emptyList();
}
public Pagination(Page<T> page) {
this.total = page.getTotalElements();
this.rows = page.getContent();
this.totalPages = page.getTotalPages();
this.currentPage = page.getNumber();
}
public long getTotal() {
return total;
}
public Pagination<T> setTotal(long total) {
this.total = total;
return this;
}
public List<T> getRows() {
return rows;
}
public Pagination<T> setRows(List<T> rows) {
this.rows = rows;
return this;
}
public int getCurrentPage() {
return currentPage;
}
public Pagination<T> setCurrentPage(int currentPage) {
this.currentPage = currentPage;
return this;
}
/**
* @return the totalPage
*/
public int getTotalPages() {
return totalPages;
}
/**
* @param totalPage the totalPage to set
*/
public Pagination<T> setTotalPages(int totalPages) {
this.totalPages = totalPages;
return this;
}
}
封装的返回结果ResponseData：
/**
* @author Bean
*
*/
public class ResponseData {
public static final int SUCCESS = 200;
public static final int DEFAULT_ERROR = 500;
public static ResponseData newSuccess(String message) {
ResponseData rd = new ResponseData(true, null);
rd.setStatus(SUCCESS);
rd.setMessage(message);
return rd;
}
public static ResponseData newSuccess(Object data) {
return ResponseData.newSuccess("", data);
}
public static ResponseData newSuccess(String message, Object data) {
ResponseData rd = new ResponseData(true, data);
rd.setStatus(SUCCESS);
rd.setMessage(message);
return rd;
}
public static ResponseData newFailed(String message) {
ResponseData rd = new ResponseData(false, null);
rd.message = message;
rd.setStatus(DEFAULT_ERROR);
return rd;
}
public static ResponseData newFailed(Object data) {
return ResponseData.newFailed("", data);
}
public static ResponseData newFailed(String message, Object data) {
ResponseData rd = new ResponseData(false, data);
rd.message = message;
rd.setStatus(DEFAULT_ERROR);
return rd;
}
private boolean success;
private Object data;
private String message;
private int status;
private List<String> errors;
private Map<String, String> fieldErrors;
public ResponseData(boolean success, Object data) {
this.success = success;
this.data = data;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public List<String> getErrors() {
return errors;
}
public void setErrors(List<String> errors) {
this.errors = errors;
}
public Map<String, String> getFieldErrors() {
return fieldErrors;
}
public void setFieldErrors(Map<String, String> fieldErrors) {
this.fieldErrors = fieldErrors;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
}
被继承的父类AbstractController：
public class AbstractController {
@Autowired
protected MessageSource messageResource;
public String getMessage(String code) {
return messageResource.getMessage(code, new Object[0], Locale.SIMPLIFIED_CHINESE);
}
public String getMessage(String code, Object[] args) {
return messageResource.getMessage(code, args, Locale.SIMPLIFIED_CHINESE);
}
public String getMessage(ServiceException exp) {
if(!StringUtils.isEmpty(exp.getErrorCode())) {
return getMessage(exp.getErrorCode());
} else {
return exp.getMessage();
}
}
public PageRequest createPageRequest(int page, int rows, Sort sort) {
return new PageRequest(page, rows, sort);
}
}
前台页面： award_list.ftl
<#setting number_format="#">
<!DOCTYPE html>
<html class="no-js m">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit">
<title>Elottery后台管理系统</title>
<meta name="description" content="Elottery后台管理系统">
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/plugins/easyui/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/plugins/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/plugins/zeus/home.css?v=2016">
<script type="text/javascript" src="${rc.contextPath}/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/plugins/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/plugins/handlebars/handlebars.min-latest.js"></script>
<script type="text/javascript" src="${rc.contextPath}/plugins/elottery_admin/activity/award_list.js"></script>
</head>
<body class="easyui-layout zeus-body" style="padding:4px;">
<table id="awards_load">
</table>
</body>
</html>
在上面页面中导入了 JEasyUI和jQuery的.JS文件.以及对应的award_list.js
award_list.js文件
$(document).ready(function() {
function image(value, rec){
if(value != "" && value != null){
return "<img style=\"height: 80px;width: 80px;\" src=\""+value+"\"/>";
}else{
return "<img style=\"height: 80px;width: 80px;\" src='.'/>";;
}
};
$('#awards_load').datagrid({
title : '基础商品列表 ',
height: 750,
fitColumns: true,
url : 'awards',
singleSelect: false,
rownumbers: true,
pagination: true,
nowrap: false,
pageSize: 10,
pageList: [10, 20, 50, 100, 150, 200],
showFooter: true,
columns: [[
{ field: 'id',checkbox: true },
{ field: 'picUrl', title: '图片', width: 100, align: 'center',formatter:image},
{ field: 'name', title: '奖品名称', width: 100, align: 'center' },
{ field: 'memo', title: '奖品描述', width: 160, align: 'center' },
{ field: 'typeDesc', title: '奖品类型', width: 100, align: 'center' },
{ field: 'score', title: '兑换积分', width: 100, align: 'center' },
{ field: 'statusDesc', title: '状态', width: 100, align: 'center' },
]],
loadFilter:function(result) {
if(result.success){
return result.data;
}
}
});
});
AwardDataCtl控制器
@Controller
public class AwardDataCtl extends AbstractController {
//调用容器的包装工具
@Autowired
private ElotteryAdminBizFactory elotteryAdminBizFactory;
@RequestMapping(value = "/****/awards")
public @ResponseBody ResponseData getAllAward(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = "page",defaultValue="1") int page,
@RequestParam(value = "rows",defaultValue="10") int rows) {
IAwardService awardService = elotteryAdminBizFactory.getService(IAwardService.class);
Pagination<Award> result = awardService.pagingAwards(this.createPageRequest(page-1, rows, new Sort(Direction.DESC, "id")));
return ResponseData.newSuccess(result);
}
@RequestMapping(value = "/****/awards/{id}")
public @ResponseBody ResponseData getAwardById(HttpServletRequest request,HttpServletResponse response,@PathVariable("id") Long id) {
IAwardService awardService = elotteryAdminBizFactory.getService(IAwardService.class);
return ResponseData.newSuccess(awardService.getAwardById(id));
}
}
翻页结果集Pagination：
public class Pagination<T> {
private int currentPage;
private long total;
private List<T> rows;
private int totalPages;
public Pagination() {
this.total = 0;
this.totalPages = 0;
this.rows = Collections.emptyList();
}
public Pagination(Page<T> page) {
this.total = page.getTotalElements();
this.rows = page.getContent();
this.totalPages = page.getTotalPages();
this.currentPage = page.getNumber();
}
public long getTotal() {
return total;
}
public Pagination<T> setTotal(long total) {
this.total = total;
return this;
}
public List<T> getRows() {
return rows;
}
public Pagination<T> setRows(List<T> rows) {
this.rows = rows;
return this;
}
public int getCurrentPage() {
return currentPage;
}
public Pagination<T> setCurrentPage(int currentPage) {
this.currentPage = currentPage;
return this;
}
/**
* @return the totalPage
*/
public int getTotalPages() {
return totalPages;
}
/**
* @param totalPage the totalPage to set
*/
public Pagination<T> setTotalPages(int totalPages) {
this.totalPages = totalPages;
return this;
}
}
封装的返回结果ResponseData：
/**
* @author Bean
*
*/
public class ResponseData {
public static final int SUCCESS = 200;
public static final int DEFAULT_ERROR = 500;
public static ResponseData newSuccess(String message) {
ResponseData rd = new ResponseData(true, null);
rd.setStatus(SUCCESS);
rd.setMessage(message);
return rd;
}
public static ResponseData newSuccess(Object data) {
return ResponseData.newSuccess("", data);
}
public static ResponseData newSuccess(String message, Object data) {
ResponseData rd = new ResponseData(true, data);
rd.setStatus(SUCCESS);
rd.setMessage(message);
return rd;
}
public static ResponseData newFailed(String message) {
ResponseData rd = new ResponseData(false, null);
rd.message = message;
rd.setStatus(DEFAULT_ERROR);
return rd;
}
public static ResponseData newFailed(Object data) {
return ResponseData.newFailed("", data);
}
public static ResponseData newFailed(String message, Object data) {
ResponseData rd = new ResponseData(false, data);
rd.message = message;
rd.setStatus(DEFAULT_ERROR);
return rd;
}
private boolean success;
private Object data;
private String message;
private int status;
private List<String> errors;
private Map<String, String> fieldErrors;
public ResponseData(boolean success, Object data) {
this.success = success;
this.data = data;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public List<String> getErrors() {
return errors;
}
public void setErrors(List<String> errors) {
this.errors = errors;
}
public Map<String, String> getFieldErrors() {
return fieldErrors;
}
public void setFieldErrors(Map<String, String> fieldErrors) {
this.fieldErrors = fieldErrors;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
}
被继承的父类AbstractController：
public class AbstractController {
@Autowired
protected MessageSource messageResource;
public String getMessage(String code) {
return messageResource.getMessage(code, new Object[0], Locale.SIMPLIFIED_CHINESE);
}
public String getMessage(String code, Object[] args) {
return messageResource.getMessage(code, args, Locale.SIMPLIFIED_CHINESE);
}
public String getMessage(ServiceException exp) {
if(!StringUtils.isEmpty(exp.getErrorCode())) {
return getMessage(exp.getErrorCode());
} else {
return exp.getMessage();
}
}
public PageRequest createPageRequest(int page, int rows, Sort sort) {
return new PageRequest(page, rows, sort);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个jar包里的网站
- 一个jar包里的网站之文件上传
- 一个jar包里的网站之返回对媒体类型
- Spring和ThreadLocal
- Spring Boot 开发微服务
- Spring AOP动态代理-切面
- easyui------显示隐藏列功能
- Spring整合Quartz（JobDetailBean方式）
- Spring整合Quartz（JobDetailBean方式）
- 如何使用jquery easyui创建标签组件
- Flex4 DataGrid中嵌入RadioButton实现思路及代码
- datagrid不可编辑行有关问题的控制方法
- jQuery寻找n以内完全数的方法
- C#实现改变DataGrid某一行和单元格颜色的方法
- 推荐10个2014年最佳的jQuery视频插件
- C#设置WinForm中DataGrid列的方法(列宽/列标题等)
- JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
- jquery+CSS3实现淘宝移动网页菜单效果