博客

一、分页实现

***前端采用基于bootstrap的轻量级表格插件bootstrap-table

*

后端采用基于mybatis的轻量级分页插件pageHelper

#前端调用实现


HTML代码

 <table id="bootstrap-table" data-resizable="true"
                           style="width: 100%;word-break:break-all; word-wrap:break-all; ">
                    </table>

js代码

var options = {
   
	url: prefix + "/list",
	columns: [{
   
		field: 'id',
		title: '主键'
	},
	{
   
		field: 'name',
		title: '名称'
	}]
};
$.table.init(options);

自定义查询条件参数（特殊情况提前设置查询条件下使用）

var options = {
   
	url: prefix + "/list",
	queryParams: queryParams,
	columns: [{
   
		field: 'id',
		title: '主键'
	},
	{
   
		field: 'name',
		title: '名称'
	}]
};
$.table.init(options);

function queryParams(params) {
   
	var search = $.table.queryParams(params);
	search.userName = $("#userName").val();
	return search;
}

#后台逻辑实现

@PostMapping("/list")
@ResponseBody
public TableDataInfo list(User user)
{
   
    startPage();  // 此方法配合前端完成自动分页
    List<User> list = userService.selectUserList(user);
    return getDataTable(list);
}

二、导入导出

在实际开发中经常需要使用导入导出功能来加快数据的操作。在项目中可以使用注解来完成此项功能。 在需要被导入导出的实体类属性添加@Excel注解，目前支持参数如下：

#导出实现流程


1、前端调用封装好的方法$.table.init，传入后台exportUrl

var options = {
   
	exportUrl: prefix + "/export",
	columns: [{
   
		field: 'id',
		title: '主键'
	},
	{
   
		field: 'name',
		title: '名称'
	}]
};
$.table.init(options);

2、添加导出按钮事件

<a class="btn btn-warning" onclick="$.table.exportExcel()">
	<i class="fa fa-download"></i> 导出
</a>

3、在实体变量上添加@Excel注解

@Excel(name = "用户序号", prompt = "用户编号")
private Long userId;

@Excel(name = "用户名称")
private String userName;
	
@Excel(name = "用户性别", readConverterExp = "0=男,1=女,2=未知")
private String sex;

@Excel(name = "最后登陆时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
private Date loginDate;

4、在Controller添加导出方法

@PostMapping("/export")
@ResponseBody
public AjaxResult export(User user)
{
   
	List<User> list = userService.selectUserList(user);
	ExcelUtil<User> util = new ExcelUtil<User>(User.class);
	return util.exportExcel(list, "用户数据");
}

#导入实现流程


1、前端调用封装好的方法$.table.init，传入后台importUrl。

var options = {
   
	importUrl: prefix + "/importData",
	columns: [{
   
		field: 'id',
		title: '主键'
	},
	{
   
		field: 'name',
		title: '名称'
	}]
};
$.table.init(options);

2、添加导入按钮事件

<a class="btn btn-info" onclick="$.table.importExcel()">
	<i class="fa fa-upload"></i> 导入
</a>

3、添加导入前端代码，form默认id为importForm，也可指定importExcel(id)

<!-- 导入区域 -->
<script id="importTpl" type="text/template">
<form enctype="multipart/form-data" class="mt20 mb10">
	<div class="col-xs-offset-1">
		<input type="file" id="file" name="file"/>
		<div class