总览：
一. GridManager.js表格插件
- 直接上插件API:链接地址
- 感觉该插件简单好用，插件作者也是有问必答，nice
二. 添加依赖
- 后端： pom文件添加：
<springframework.data>1.7.0.RELEASE</springframework.data>
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-commons</artifactId>
<version>${springframework.data}</version>
</dependency>
<pagehelper.version>5.1.1</pagehelper.version>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>
springMVC配置文件中添加：
<!-- 处理器映射器 适配器 -->
<mvc:annotation-driven conversion-service="conversionServiceFactoryBean">
<!-- org.springframework.data.domain.Pageable 配置 -->
<mvc:argument-resolvers>
<bean class="org.springframework.data.web.PageableHandlerMethodArgumentResolver"/>
</mvc:argument-resolvers>
</mvc:annotation-driven>
mybatis配置文件添加：
<bean class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 注入数据源(切换数据库的自定义类) -->
<property name="dataSource" ref="multipleDataSource" />
<!-- 配置加载mybatis核心配置文件 -->
<property name="configLocation" value="classpath:mybatis-config.xml" />
<!-- 配置mybatis pagehelper分页插件 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<!--使用下面的方式配置参数，一行配置一个 -->
<value>
helperDialect=mysql
</value>
</property>
</bean>
</array>
</property>
</bean>
- 前端
<link rel="stylesheet" type="text/css" href="${base}/resources/gridManager/css/GridManager.css">
<link rel="stylesheet" type="text/css" href="${base}/resources/gridManager/my/my.css">
<script type="text/javascript" src="${base}/resources/js/jquery-1.11.0.js"></script>
<!-- GridManager2.js将原分页属性名称进行了修改，为使分页对象接收参数统一 -->
<script type="text/javascript" src="${base}/resources/gridManager/js/GridManager2.js"></script>
三. 具体实现
页面容器
<div class="container-fluid">
<ul class="breadcrumb clearfix">
<ol class="breadcrumb my-right">
<li><a href="#">当前位置:</a></li>
<li><a href="#">产品管理</a></li>
<li class="active">产品列表</li>
</ol>
</ul>
<div class="search-area">
<div class="sa-ele">
<label class="se-title">产品名称:</label>
<input class="se-con" name="name"/>
</div>
<div class="sa-ele">
<label class="se-title">请选择品牌:</label>
<select name="brandId" id="brandId">
</select>
</div>
<div class="sa-ele">
<label class="se-title">上下架:</label>
<select name="isShow">
<option value="0">下架</option>
<option value="1">上架</option>
</select>
</div>
<div class="sa-ele">
<button class="search-action">搜索</button>
<button class="reset-action">重置</button>
</div>
</div>
<br>
<!-- 分页插件填充处 -->
<table></table>
</div>
1.填充品牌下拉框
页面引入品牌js脚本
<script type="text/javascript" src="${base}/resources/js/product/brand-select.js"></script>
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("<option value=''>请选择品牌</option>");
$.each(brands, function(i, item) {
$("#brandId").append("<option value='"+item.id+"'>"+item.name+"</option>");
});
},//请求成功的处理
complete:function(){},//请求完成的处理
error:function(){
alert("error...");
}//请求出错的处理
});
});
查询品牌后端 较为简单，只贴主要代码
@ResponseBody
@RequestMapping(value = "selectPageByQueryAjax")
public JsonResult<Object> toEditBrand(){
JsonResult<Object> result = new JsonResult<>();
List<BrandVO> brands = brandService.selectPageByQueryAjax();
result.setDataObject(brands);
return result;
}
2.分页条件查询产品
页面引入该JS脚本
<script type="text/javascript" src="${base}/resources/js/product/goods-list.js"></script>
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 '<img width="50" height="50" src=""/>';
}
},{
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 '<span class="plugin-action del-action" onclick="delectRowData(this)" learnLink-id="'+rowObject.id+'">删除</span>'
+' <span class="plugin-action edt-action" onclick="editRowData(this)" learnLink-id="'+rowObject.id+'">编辑</span>';
}
}
]
// 分页前事件
,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<ProductVO> page = productService.ajaxPageProductList(productQuery, pageable);
long totals = page.getTotal();
List<ProductVO> 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<ProductVO> ajaxPageProductList(ProductQuery productQuery, Pageable pageable) {
// 分页处理,从分页插件中获取数据
PageHelper.startPage(pageable.getPageNumber(), pageable.getPageSize());
List<ProductVO> result = productDAO.queryProductPageLists(productQuery);
return new PageInfo<>(result);
}
DAO层xml文件
<sql id="Base_Column_List" >
id, brand_id, name, weight, is_new, is_hot, is_commend, is_show, img_url, is_del,
description, package_list, colors, sizes, create_time
</sql>
<select id="queryProductPageLists" parameterType="ProductQuery" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from product_tb
<where>
<if test="name != null">
name like "%"#{name}"%"
</if>
<if test="brandId != null">
and brand_id = #{brandId}
</if>
<if test="isShow != null">
and is_show = #{isShow}
</if>
</where>
</select>
到此大功告成
5563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
