GridManager分页功能+高级查询实现

• GridManager是一款可以使用极简的代码来实现多态表格的强大软件，而且是开源且免费的。
• GridManager具有配置灵活、使用便捷的表格组件，它快速、灵活的对Table标签进行实例化，让Table标签充满活力。
• 而其中的分页功能更是一大亮点，极大的节省了程序员的开发时间，并且做出来的表格简洁美观。
• 让我们一起来看看分页功能和高级查询到底是如何实现的吧~

    实现思路分析：

    1.首先，GridManager对于分页会在请求页面的同时，发送两个参数到后台，我们可以进行接收。

    2.参数分别是   pageSizeKey（请求参数中每页显示条数key健值, 默认为pSize）和 currentPageKey（请求参数中当前页key键值,默认为cPage）。

    3.而众所周知，在一个项目中，分页功能大概率会在多处地方重复使用到，所以我们可以把这两个参数封装成一个工具类来进行接收。

    4.对于高级查询，我们同样需要接收参数到后台数据库进行查询并返回数据，而一个项目中也会在多处地方用到高级查询，所以我们针对不同的查询条件，继续封装查询条件实体类来继承分页工具类，这样我们就可以将参数全部获取到，并在后端进行查询，返回相应的数据，展示到表格上。

 

   下面将展示其中的一些实现代码

    将GridManager传回的参数封装成工具类。

package cn.itsource.query;
/**
 * 
* @Title: BaseQuery.java
* @Package:cn.itsource.query
* @Description:前台传回的参数
* @author:临小星
* @date:2021年5月14日
* @version:V1.0
 */
public class BaseQuery {
	//第几页
	private Integer pagenum;
	//展示几条数据
	private Integer pageshownum;	
	public BaseQuery(Integer pagenum, Integer pageshownum) {
		super();
		this.pagenum = pagenum;
		this.pageshownum = pageshownum;
	}

	public BaseQuery() {
		super();
		// TODO Auto-generated constructor stub
	}

	public Integer getPagenum() {
		return pagenum;
	}

	public void setPagenum(Integer pagenum) {
		this.pagenum = pagenum;
	}

	public  Integer getPageshownum() {
		return pageshownum;
	}

	public void setPageshownum(Integer pageshownum) {
		this.pageshownum = pageshownum;
	}
	
	public Integer getFirst(){
		return (this.pagenum-1)*pageshownum;
	}

	@Override
	public String toString() {
		return "BaseQuery [pagenum=" + pagenum + ", pageshownum=" + pageshownum + "]";
	}
	
	
}

  将每个模块的高级查询所需要传回的参数进行封装，并继承表格工具类

package cn.itsource.query;

public class QuestionQuery extends BaseQuery {
	private String title;
	private Boolean enable;
	public QuestionQuery(Integer pagenum, Integer pageshownum, String title, Boolean enable) {
		super(pagenum, pageshownum);
		this.title = title;
		this.enable = enable;
	}
	public QuestionQuery() {
		super();
		// TODO Auto-generated constructor stub
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public Boolean getEnable() {
		return enable;
	}
	public void setEnable(Boolean enable) {
		this.enable = enable;
	}
	@Override
	public String toString() {
		return "QuestionQuery [title=" + title + ", enable=" + enable + "]";
	}
}

  从而接收所有从前端传回的数据~，再进行查询，并返回查询数据。

package cn.itsource.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.itsource.domain.Question;
import cn.itsource.mapper.QuestionMapper;
import cn.itsource.query.QuestionQuery;
import cn.itsource.service.IQuestionService;
@Service
public class QuestionServiceImpl implements IQuestionService {
	@Autowired
	private QuestionMapper mapper;
	@Override
	public List<Question> findAll(QuestionQuery query) {
		List<Question> list = mapper.findAll(query);
		return list;
	}
	@Override
	public List<Question> find() {
		
		return mapper.find();
	}
	@Override
	public void save(Question que) {
		if(que.getId()==null){//添加操作
			mapper.insert(que);
		}else{//修改操作
			mapper.update(que);
		}
	}
	@Override
	public void deleteById(Long id) {
		mapper.deleteById(id);
	}

}

  在发送请求时，将返回的数据和字段对应起来，分别展示到表格上。

document.querySelector('#table-demo-ajaxPageCode').GM({
		        gridManagerName: 'demo-ajaxPageCode', //名称随意
		       	ajaxData: '/system/question/findAll', //请求路径 绝对路径
		        //ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
		        ajaxType: 'POST',//请求方式
		        supportAjaxPage: true,//是否开启分页
		        sizeData: [5,10,15,20,25],
		        pageSize: 5,
		        currentPageKey: 'pagenum',
		        pageSizeKey: 'pageshownum',
		        columnData: [
		            {
		                key: 'title',
		                text: '标题',
		                align: "center"
		            },{
		                key: 'content',
		                text: '内容',
		                align: "center",
		            },{
		                key: 'enable',
		                text: '是否启用',
		                align: "center",
		                template: function(cell, row, index, key){
		                	// console.debug(cell);  // cell: key对应的具体值
		                	// console.debug(row);  // row: 当前一条数据
		                	// console.debug(index); // 索引
		                	// console.debug(key); //  key:key这个字段
		                    return cell?"<font color='green'>启用</font>":"<font color='red'>禁用</font>";
		                }
		            },{
		                key: 'id',
		                text: '操作 &nbsp;&nbsp;<a id="add" style="color:green;z-index:9999;" href="javascript:;">添加</a>',
		                align: "center",
		                template: function(cell, row, index, key){
		                	return '<a data-id="'+cell+'" style="color:red;" href="javascript:;">删除</a>'+
		                	"&nbsp;&nbsp;<a id='update' data-row='"+JSON.stringify(row)+"' style='color:blue;' href='javascript:;'>修改</a>";
		                }
		            }
		            
		        ]
		    });

  到此，分页功能和高级查询实现就完成了~

  大家是否有了自己的思路呢？

  祝大家快乐工作每一天！