总览:
一. 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}
到此大功告成