总览：

一. GridManager.js表格插件

直接上插件API:链接地址

感觉该插件简单好用，插件作者也是有问必答，nice

二. 添加依赖

后端： pom文件添加：

1.7.0.RELEASE

org.springframework.data

spring-data-commons

${springframework.data}

5.1.1

com.github.pagehelper

pagehelper

${pagehelper.version}

springMVC配置文件中添加：

mybatis配置文件添加：

helperDialect=mysql

前端

三. 具体实现

页面容器

1.填充品牌下拉框

页面引入品牌js脚本

brand-select.js

$(function(){

$.ajax({

url:"../brand/selectPageByQueryAjax",//请求的url地址

dataType:"json",//返回的格式为json

async:true,//请求是否异步，默认true异步，这是ajax的特性

data:{},//参数值

type:"POST",//请求的方式

beforeSend:function(){},//请求前的处理

success:function(data){

var brands = data.dataObject;

$("#brandId").find("option").remove();//防止重复追加

$("#brandId").append("请选择品牌");

$.each(brands, function(i, item) {

$("#brandId").append(""+item.name+"");

});

},//请求成功的处理

complete:function(){},//请求完成的处理

error:function(){

alert("error...");

}//请求出错的处理

});

});

查询品牌后端 较为简单，只贴主要代码

@ResponseBody

@RequestMapping(value = "selectPageByQueryAjax")

public JsonResult toEditBrand(){

JsonResult result = new JsonResult<>();

List brands = brandService.selectPageByQueryAjax();

result.setDataObject(brands);

return result;

}

2.分页条件查询产品

页面引入该JS脚本

js内容如下:

var table = document.querySelector('table')

var TGM = table.GM({

supportDrag: false//是否支持拖拽功能

,supportRemind: true//是否支持提示信息功能

,gridManagerName: 'test'//表格grid-manager所对应的值[可在html中配置]

,isCombSorting: true //是否使用组合排序功能

,height: 'auto'//配置表格区域的高度，需要带单位.如 '100px' 或 '50%'

,width:'1040px'

,supportAjaxPage:true//指定列表是否支持分页

,supportSorting: true//配置是否支持排序功能, 非必填项，默认为 false。

,disableCache: false//用于配置是否禁用用户记忆功能, 非必填项，默认为false

,ajax_url: '../goods/goodsPageListByQuery' //请求url

,ajax_type: 'POST'//ajax请求类型['GET', 'POST']默认GET

,query: {

"isShow":false,//后台传参,默认下架

}//配置接口请求参数，可用于搜索条件传递;注意事项:如果是对已实例化表格增加请求参数，请使用.setQuery()方法。

,dataKey: 'list' // 数据本身返回为data, 把数据名模拟为list, 再通responseHandler去更改

,textAlign: 'center'//在v2.3.15将弃用,请使用columnData 中的 align进行配置

,totalsKey:'totals' //数据总条数

,sizeData:[5,10,20] //配置表格每页显示条数选择项，只允许正整数。[10,20,30,50,100]默认

,pageSize:5 //配置初始进入时每页的显示条数，需要与sizeData中的值匹配。

// 可以通过该方法修改全部的请求参数

,requestHandler: function(request){

request.newParams = '这个参数是通过 requestHandler 函数新增的';

}

// 可以通过该方法修改返回的数据

,responseHandler: function(response){

response.list = response.data;

}

//表格列配置参数，数组类型。单个数组元素为对象类型，每一个元素对应一个表格列。

//通过该参数，可以对列进行配置。

,columnData: [{

key: 'id',// 列的唯一索引。字符串类型，必设项

remind: 'the id',// 列的表头提醒内容,字符串类型，非必设项

// align: 'center',

text: '产品ID'//列表头显示名称

},{

key: 'name',

remind: 'the name',

text: '产品名称'

},{

key: 'imgUrl',

remind: 'the imgUrl',

text: '产品图片',

template: function(imgUrl, rowObject){

return '';

}

},{

key: 'isNew',

remind: 'the isNew',

text: '是否新品',

template: function(isNew, rowObject){

return isNew === 1 ? '是' : '否';

}

},{

key: 'isHot',

remind: 'the isHot',

text: '是否热卖',

template: function(isNew, rowObject){

return isNew === 1 ? '是' : '否';

}

},{

key: 'createTime',

remind: 'the createTime',

text: '创建时间',

template: function(lastDate, rowObject){

return new Date(lastDate).format('YYYY-MM-DD HH:mm:ss');

}

},{

key: 'isShow',

remind: 'the isShow',

text: '上下架',

template: function(isNew, rowObject){

return isNew === 1 ? '上架' : '下架';

}

},{

key: 'action',

remind: 'the action',

width: '10%',

text: '操作',

template: function(action, rowObject){

return '删除'

+' 编辑';

}

}

]

// 分页前事件

,pagingBefore: function(query){

console.log('pagingBefore', query);

}

// 分页后事件

,pagingAfter: function(data){

console.log('pagingAfter', data);

}

}, function(query){

// 渲染完成后的回调函数

console.log('渲染完成后的回调函数:', query);

});

//日期格式化,不是插件的代码,只用于处理时间格式化

Date.prototype.format = function(fmt){

var o = {

"M+": this.getMonth() + 1, //月份

"D+": this.getDate(), //日

"d+": this.getDate(), //日

"H+": this.getHours(), //小时

"h+": this.getHours(), //小时

"m+": this.getMinutes(), //分

"s+": this.getSeconds(), //秒

"q+": Math.floor((this.getMonth() + 3) / 3), //季度

"S": this.getMilliseconds() //毫秒

};

if (/([Y,y]+)/.test(fmt)){

fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

}

for (var k in o){

if(new RegExp("(" + k + ")").test(fmt)){

fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

}

}

return fmt;

};

// 删除功能

function delectRowData(node){

// 获取到当前的tr node

var tr = node.parentNode.parentNode;

// 获取到当前渲染tr 所使用的数据

var rowData = document.querySelector('table').GM('getRowData', tr);

// 执行删除操作

if(window.confirm('确认要删除['+rowData.id+']?')){

window.alert('进行后台处理.');

}

}

//编辑

function editRowData(node){

// 获取到当前的tr node

var tr = node.parentNode.parentNode;

// 获取到当前渲染tr 所使用的数据

var rowData = document.querySelector('table').GM('getRowData', tr);

// 执行编辑页面跳转操作

if(window.confirm('确认要修改当前id为['+rowData.id+']的记录吗?')){

$.ajax({

url:"../goods/toEditGoods",//请求的url地址

dataType:"json",//返回的格式为json

async:true,//请求是否异步，默认true异步，这是ajax的特性

data:{

"id":rowData.id

},//参数值

type:"POST",//请求的方式

beforeSend:function(){},//请求前的处理

success:function(data){

console.log("去后台产品编辑");

},//请求成功的处理

complete:function(){},//请求完成的处理

error:function(){

alert("去产品编辑页面出错了...");

}//请求出错的处理

});

}

}

//绑定搜索事件

document.querySelector('.search-action').addEventListener('click', function () {

var _query = {

name: document.querySelector('[name="name"]').value,

brandId: document.querySelector('[name="brandId"]').value,

isShow: document.querySelector('[name="isShow"]').value,

page: 1

};

table.GM('setQuery', _query, function(){

console.log('setQuery执行成功');

});

});

//绑定重置

document.querySelector('.reset-action').addEventListener('click', function () {

document.querySelector('[name="name"]').value = '';

});

后端

封装返回分页结果

public class PageResult {

private List data;//数据结果集

private Long totals;//总记录数

private String stasus;//返回状态

...

}

controller

@ResponseBody

@RequestMapping(value = "/goodsPageListByQuery")

public PageResult goodsPageListByQuery(

@PageableDefault Pageable pageable,ProductQuery productQuery){

try {

PageInfo page = productService.ajaxPageProductList(productQuery, pageable);

long totals = page.getTotal();

List list = page.getList();

PageResult result=new PageResult(list, totals, "success");

return result;

} catch (Exception e) {

e.printStackTrace();

PageResult result=new PageResult(null,null , "error");

return result;

}

}

业务逻辑service

public PageInfo ajaxPageProductList(ProductQuery productQuery, Pageable pageable) {

// 分页处理,从分页插件中获取数据

PageHelper.startPage(pageable.getPageNumber(), pageable.getPageSize());

List result = productDAO.queryProductPageLists(productQuery);

return new PageInfo<>(result);

}

DAO层xml文件

id, brand_id, name, weight, is_new, is_hot, is_commend, is_show, img_url, is_del,

description, package_list, colors, sizes, create_time

select

from product_tb

name like "%"#{name}"%"

and brand_id = #{brandId}

and is_show = #{isShow}

到此大功告成