SSM+BootStrap+BootStrap Table web项目全记录
最近做了一个前端+后端整合的项目，被前端虐的好惨。并且是第一次使用BootStrap table遇到了好多问题。这里记录一下，以便以后查看。
篇幅限制，SSM的配置就不贴了。主要记录一下BootStrap table的使用以及与之相关的前后端的交互。
本项目的流程是登录成功之后，跳转index.jsp,代码如下。里面的Model()方法是自定义的js函数，与主体关系不大，故把文件放在最后。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="common/tag.jsp"%>
XXXX
<%@ include file="/WEB-INF/jsp/common/head.jsp"%>
<%@ include file="/WEB-INF/jsp/common/left.jsp"%>
整个index页面中又包含了其他3个jsp。其中tag.jsp主要放置项目相关的js文件；left.jsp是展示左侧的菜单；head.jsp展示的是整个页面的头部。下面贴出相关的代码
tag.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
left.jsp 这里实现了左侧菜单栏在刷新之后仍然保持二级菜单的展开状态，借助了cookie实现此功能。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
现在整个网站的框架基本成型，下面开始BootStrap Table的虐人之旅。BootStrap Table简单来说就是一个基于BootStrap的前端表格插件。通过配置一些参数就能实现表格所用到的常用功能。整个项目做下来，我体会到了BootStrap Table的强大，也体会到了没有好的文档指导的虐心。官网的演示示例，恕我直言......无奈只能东拼西凑在网上找找找。也正是这个痛苦的过程，促使我写了这篇文章。
闲话到此为止，我们想要展示一下当前系统的用户，所以就要借助BootStrap Table来实现表格的各种功能。
这里需要多说一句，一般来说做web项目，我们会使用iframe来实现网页的布局。我刚开始也是这样做的，但是这样太low，我们参照index.jsp的写法，直接引入这些界面即可。下图是我们要实现的sysuser的增删改查，当然还有展示。一开始没有想到分类写，整个的功能集合在了一个jsp页面，想想也是没谁了。
先来看下list，仿index引入了网站的整体框架。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../common/tag.jsp"%>
XXXX
<%@ include file="/WEB-INF/jsp/common/head.jsp"%>
<%@ include file="/WEB-INF/jsp/common/left.jsp"%>
大头戏在于BootStrap Table的初始化以及各种功能的实现。初始化参数不多介绍了，可以很容易在网上找到。主要说下分页查询和查找。分页的重要参数已经高亮标出，如果按照这种设置无法成功分页的话，可以尝试把参数修改一下：
param.rows=params.pageSize,
param.page=params.pageNumber
修改成：
param.row=params.limit,
param.page=params.offset
对于BootStrap Table的查找(search）功能，刚开始迷惑了好久。为了实现search功能，我们首先要自己写一个搜索框，而不是使用BootStrap Table自带的搜索框。然后像上面代码那样初始化即可。search功能调用的方法跟初始化表格时调用的方法是一样的，一点区别就是初始化时是不带查询参数的查询；search时是通过参数进行查询。这一点可以在执行的sql语句中看出来
查询第二页
搜索用户
当然，搜索功能不是只靠前端就能实现的。这个项目使用了pagehelper物理分页插件，pom.xml中添加pagehelper依赖
com.github.pagehelper
pagehelper
5.0.0
controller层接收参数
/**
* 调用场景：查询系统所有的用户，并分页展示
* @param page 当前页数
* @param rows 每页显示行数
* @return json
* @throws Exception
*/
@RequestMapping("/queryUsers")
@ResponseBody
@RequiresPermissions("user:queryUsers")
public String queryUsers(@RequestParam(value = "page", required = true, defaultValue = "1") Integer page,
@RequestParam(value = "rows", required = true, defaultValue = "10") Integer rows, SysUser sysUser) throws Exception {
DataGridResult result = userService.findUserList(sysUser, page, rows);
return JSON.toJSONString(result);
}
DateGridResult.java
import java.io.Serializable;
import java.util.List;
public class DataGridResult implements Serializable {
private long total;
private List rows;
//getter && setter
}
servier层
public DataGridResult findUserList(SysUser sysUser, Integer page, Integer rows) throws Exception {
// 设置分页信息
PageHelper.startPage(page, rows);
SysUserExample example = new SysUserExample();
SysUserExample.Criteria criteria = example.createCriteria();
if(StringUtil.isNotEmpty(sysUser.getUsername())) {
criteria.andUsernameEqualTo(sysUser.getUsername());
}
List userList = sysUserMapper.selectByExample(example);
// 取查询结果
PageInfo pageInfo = new PageInfo<>(userList);
DataGridResult result = new DataGridResult();
result.setTotal(pageInfo.getTotal());
result.setRows(userList);
return result;
}
SysUserExample.java
public class SysUserExample {
protected String orderByClause;
protected boolean distinct;
protected List oredCriteria;
public SysUserExample() {
oredCriteria = new ArrayList();
}
public void setOrderByClause(String orderByClause) {
this.orderByClause = orderByClause;
}
public String getOrderByClause() {
return orderByClause;
}
public void setDistinct(boolean distinct) {
this.distinct = distinct;
}
public boolean isDistinct() {
return distinct;
}
public List getOredCriteria() {
return oredCriteria;
}
public void or(Criteria criteria) {
oredCriteria.add(criteria);
}
public Criteria or() {
Criteria criteria = createCriteriaInternal();
oredCriteria.add(criteria);
return criteria;
}
public Criteria createCriteria() {
Criteria criteria = createCriteriaInternal();
if (oredCriteria.size() == 0) {
oredCriteria.add(criteria);
}
return criteria;
}
protected Criteria createCriteriaInternal() {
Criteria criteria = new Criteria();
return criteria;
}
public void clear() {
oredCriteria.clear();
orderByClause = null;
distinct = false;
}
protected abstract static class GeneratedCriteria {
protected List criteria;
protected GeneratedCriteria() {
super();
criteria = new ArrayList();
}
public boolean isValid() {
return criteria.size() > 0;
}
public List getAllCriteria() {
return criteria;
}
public List getCriteria() {
return criteria;
}
protected void addCriterion(String condition) {
if (condition == null) {
throw new RuntimeException("Value for condition cannot be null");
}
criteria.add(new Criterion(condition));
}
protected void addCriterion(String condition, Object value, String property) {
if (value == null) {
throw new RuntimeException("Value for " + property + " cannot be null");
}
criteria.add(new Criterion(condition, value));
}
protected void addCriterion(String condition, Object value1, Object value2, String property) {
if (value1 == null || value2 == null) {
throw new RuntimeException("Between values for " + property + " cannot be null");
}
criteria.add(new Criterion(condition, value1, value2));
}
public Criteria andIdIsNull() {
addCriterion("id is null");
return (Criteria) this;
}
public Criteria andIdIsNotNull() {
addCriterion("id is not null");
return (Criteria) this;
}
public Criteria andIdEqualTo(Integer value) {
addCriterion("id =", value, "id");
return (Criteria) this;
}
public Criteria andIdNotEqualTo(Integer value) {
addCriterion("id <>", value, "id");
return (Criteria) this;
}
public Criteria andIdGreaterThan(Integer value) {
addCriterion("id >", value, "id");
return (Criteria) this;
}
public Criteria andIdGreaterThanOrEqualTo(Integer value) {
addCriterion("id >=", value, "id");
return (Criteria) this;
}
public Criteria andIdLessThan(Integer value) {
addCriterion("id <", value, "id");
return (Criteria) this;
}
public Criteria andIdLessThanOrEqualTo(Integer value) {
addCriterion("id <=", value, "id");
return (Criteria) this;
}
public Criteria andIdIn(List values) {
addCriterion("id in", values, "id");
return (Criteria) this;
}
public Criteria andIdNotIn(List values) {
addCriterion("id not in", values, "id");
return (Criteria) this;
}
public Criteria andIdBetween(Integer value1, Integer value2) {
addCriterion("id between", value1, value2, "id");
return (Criteria) this;
}
public Criteria andIdNotBetween(Integer value1, Integer value2) {
addCriterion("id not between", value1, value2, "id");
return (Criteria) this;
}
public Criteria andUsercodeIsNull() {
addCriterion("usercode is null");
return (Criteria) this;
}
public Criteria andUsercodeIsNotNull() {
addCriterion("usercode is not null");
return (Criteria) this;
}
public Criteria andUsercodeEqualTo(String value) {
addCriterion("usercode =", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeNotEqualTo(String value) {
addCriterion("usercode <>", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeGreaterThan(String value) {
addCriterion("usercode >", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeGreaterThanOrEqualTo(String value) {
addCriterion("usercode >=", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeLessThan(String value) {
addCriterion("usercode <", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeLessThanOrEqualTo(String value) {
addCriterion("usercode <=", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeLike(String value) {
addCriterion("usercode like", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeNotLike(String value) {
addCriterion("usercode not like", value, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeIn(List values) {
addCriterion("usercode in", values, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeNotIn(List values) {
addCriterion("usercode not in", values, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeBetween(String value1, String value2) {
addCriterion("usercode between", value1, value2, "usercode");
return (Criteria) this;
}
public Criteria andUsercodeNotBetween(String value1, String value2) {
addCriterion("usercode not between", value1, value2, "usercode");
return (Criteria) this;
}
public Criteria andUsernameIsNull() {
addCriterion("username is null");
return (Criteria) this;
}
public Criteria andUsernameIsNotNull() {
addCriterion("username is not null");
return (Criteria) this;
}
public Criteria andUsernameEqualTo(String value) {
addCriterion("username =", value, "username");
return (Criteria) this;
}
public Criteria andUsernameNotEqualTo(String value) {
addCriterion("username <>", value, "username");
return (Criteria) this;
}
public Criteria andUsernameGreaterThan(String value) {
addCriterion("username >", value, "username");
return (Criteria) this;
}
public Criteria andUsernameGreaterThanOrEqualTo(String value) {
addCriterion("username >=", value, "username");
return (Criteria) this;
}
public Criteria andUsernameLessThan(String value) {
addCriterion("username <", value, "username");
return (Criteria) this;
}
public Criteria andUsernameLessThanOrEqualTo(String value) {
addCriterion("username <=", value, "username");
return (Criteria) this;
}
public Criteria andUsernameLike(String value) {
addCriterion("username like", value, "username");
return (Criteria) this;
}
public Criteria andUsernameNotLike(String value) {
addCriterion("username not like", value, "username");
return (Criteria) this;
}
public Criteria andUsernameIn(List values) {
addCriterion("username in", values, "username");
return (Criteria) this;
}
public Criteria andUsernameNotIn(List values) {
addCriterion("username not in", values, "username");
return (Criteria) this;
}
public Criteria andUsernameBetween(String value1, String value2) {
addCriterion("username between", value1, value2, "username");
return (Criteria) this;
}
public Criteria andUsernameNotBetween(String value1, String value2) {
addCriterion("username not between", value1, value2, "username");
return (Criteria) this;
}
public Criteria andPasswordIsNull() {
addCriterion("password is null");
return (Criteria) this;
}
public Criteria andPasswordIsNotNull() {
addCriterion("password is not null");
return (Criteria) this;
}
public Criteria andPasswordEqualTo(String value) {
addCriterion("password =", value, "password");
return (Criteria) this;
}
public Criteria andPasswordNotEqualTo(String value) {
addCriterion("password <>", value, "password");
return (Criteria) this;
}
public Criteria andPasswordGreaterThan(String value) {
addCriterion("password >", value, "password");
return (Criteria) this;
}
public Criteria andPasswordGreaterThanOrEqualTo(String value) {
addCriterion("password >=", value, "password");
return (Criteria) this;
}
public Criteria andPasswordLessThan(String value) {
addCriterion("password <", value, "password");
return (Criteria) this;
}
public Criteria andPasswordLessThanOrEqualTo(String value) {
addCriterion("password <=", value, "password");
return (Criteria) this;
}
public Criteria andPasswordLike(String value) {
addCriterion("password like", value, "password");
return (Criteria) this;
}
public Criteria andPasswordNotLike(String value) {
addCriterion("password not like", value, "password");
return (Criteria) this;
}
public Criteria andPasswordIn(List values) {
addCriterion("password in", values, "password");
return (Criteria) this;
}
public Criteria andPasswordNotIn(List values) {
addCriterion("password not in", values, "password");
return (Criteria) this;
}
public Criteria andPasswordBetween(String value1, String value2) {
addCriterion("password between", value1, value2, "password");
return (Criteria) this;
}
public Criteria andPasswordNotBetween(String value1, String value2) {
addCriterion("password not between", value1, value2, "password");
return (Criteria) this;
}
public Criteria andSaltIsNull() {
addCriterion("salt is null");
return (Criteria) this;
}
public Criteria andSaltIsNotNull() {
addCriterion("salt is not null");
return (Criteria) this;
}
public Criteria andSaltEqualTo(String value) {
addCriterion("salt =", value, "salt");
return (Criteria) this;
}
public Criteria andSaltNotEqualTo(String value) {
addCriterion("salt <>", value, "salt");
return (Criteria) this;
}
public Criteria andSaltGreaterThan(String value) {
addCriterion("salt >", value, "salt");
return (Criteria) this;
}
public Criteria andSaltGreaterThanOrEqualTo(String value) {
addCriterion("salt >=", value, "salt");
return (Criteria) this;
}
public Criteria andSaltLessThan(String value) {
addCriterion("salt <", value, "salt");
return (Criteria) this;
}
public Criteria andSaltLessThanOrEqualTo(String value) {
addCriterion("salt <=", value, "salt");
return (Criteria) this;
}
public Criteria andSaltLike(String value) {
addCriterion("salt like", value, "salt");
return (Criteria) this;
}
public Criteria andSaltNotLike(String value) {
addCriterion("salt not like", value, "salt");
return (Criteria) this;
}
public Criteria andSaltIn(List values) {
addCriterion("salt in", values, "salt");
return (Criteria) this;
}
public Criteria andSaltNotIn(List values) {
addCriterion("salt not in", values, "salt");
return (Criteria) this;
}
public Criteria andSaltBetween(String value1, String value2) {
addCriterion("salt between", value1, value2, "salt");
return (Criteria) this;
}
public Criteria andSaltNotBetween(String value1, String value2) {
addCriterion("salt not between", value1, value2, "salt");
return (Criteria) this;
}
public Criteria andStatusIsNull() {
addCriterion("status is null");
return (Criteria) this;
}
public Criteria andStatusIsNotNull() {
addCriterion("status is not null");
return (Criteria) this;
}
public Criteria andStatusEqualTo(String value) {
addCriterion("status =", value, "status");
return (Criteria) this;
}
public Criteria andStatusNotEqualTo(String value) {
addCriterion("status <>", value, "status");
return (Criteria) this;
}
public Criteria andStatusGreaterThan(String value) {
addCriterion("status >", value, "status");
return (Criteria) this;
}
public Criteria andStatusGreaterThanOrEqualTo(String value) {
addCriterion("status >=", value, "status");
return (Criteria) this;
}
public Criteria andStatusLessThan(String value) {
addCriterion("status <", value, "status");
return (Criteria) this;
}
public Criteria andStatusLessThanOrEqualTo(String value) {
addCriterion("status <=", value, "status");
return (Criteria) this;
}
public Criteria andStatusLike(String value) {
addCriterion("status like", value, "status");
return (Criteria) this;
}
public Criteria andStatusNotLike(String value) {
addCriterion("status not like", value, "status");
return (Criteria) this;
}
public Criteria andStatusIn(List values) {
addCriterion("status in", values, "status");
return (Criteria) this;
}
public Criteria andStatusNotIn(List values) {
addCriterion("status not in", values, "status");
return (Criteria) this;
}
public Criteria andStatusBetween(String value1, String value2) {
addCriterion("status between", value1, value2, "status");
return (Criteria) this;
}
public Criteria andStatusNotBetween(String value1, String value2) {
addCriterion("status not between", value1, value2, "status");
return (Criteria) this;
}
}
public static class Criteria extends GeneratedCriteria {
protected Criteria() {
super();
}
}
public static class Criterion {
private String condition;
private Object value;
private Object secondValue;
private boolean noValue;
private boolean singleValue;
private boolean betweenValue;
private boolean listValue;
private String typeHandler;
public String getCondition() {
return condition;
}
public Object getValue() {
return value;
}
public Object getSecondValue() {
return secondValue;
}
public boolean isNoValue() {
return noValue;
}
public boolean isSingleValue() {
return singleValue;
}
public boolean isBetweenValue() {
return betweenValue;
}
public boolean isListValue() {
return listValue;
}
public String getTypeHandler() {
return typeHandler;
}
protected Criterion(String condition) {
super();
this.condition = condition;
this.typeHandler = null;
this.noValue = true;
}
protected Criterion(String condition, Object value, String typeHandler) {
super();
this.condition = condition;
this.value = value;
this.typeHandler = typeHandler;
if (value instanceof List) {
this.listValue = true;
} else {
this.singleValue = true;
}
}
protected Criterion(String condition, Object value) {
this(condition, value, null);
}
protected Criterion(String condition, Object value, Object secondValue, String typeHandler) {
super();
this.condition = condition;
this.value = value;
this.secondValue = secondValue;
this.typeHandler = typeHandler;
this.betweenValue = true;
}
protected Criterion(String condition, Object value, Object secondValue) {
this(condition, value, secondValue, null);
}
}
}
mapper.xml
至此，分页展示和查询完成。其他的增删改就很简单了
sysuser_add.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
新增用户
sysuser_change_passwd.jsp 这里用到了BootStrap validate表单验证。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
修改密码
自定义js dialog.js
var Modal = function(options) {
var defaults = {
backdrop:'static',
Keyboard :'true',
show :'true',
};
var settings = $.extend(defaults, options);
return $("#myModal").modal({
backdrop : options.backdrop,
Keyboard : options.Keyboard,
show : options.show,
remote : options.url,
});
};
$(function() {
/** 模态框（Modal）* */
var modalHtml = '';
$("body").append(modalHtml);
$('#myModal').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
});
/**
* description:对话框
* huchenghao
* @returns
*/
(function($) {
window.Dialog = function() {
var html = ''
+ ''
+ '' + '' + '';
var dialogdHtml = ''
+ ''
+ ''
+ '' + '';
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var generateId = function() {
var date = new Date();
return 'mdl' + date.valueOf();
}
var init = function(options) {
options = $.extend({}, {
title : "操作提示",
message : "提示内容",
btnok : "确定",
btncl : "取消",
width : 200,
auto : false
}, options || {});
var modalId = generateId();
var content = html.replace(reg, function(node, key) {
return {
Id : modalId,
Title : options.title,
Message : options.message,
BtnOk : options.btnok,
BtnCancel : options.btncl
}[key];
});
$('body').append(content);
$('#' + modalId).modal({
width : options.width,
backdrop : 'static'
});
$('#' + modalId).on('hide.bs.modal', function(e) {
$('body').find('#' + modalId).remove();
});
return modalId;
}
return {
alert : function(options) {
if (typeof options == 'string') {
options = {
message : options
};
}
var id = init(options);
var modal = $('#' + id);
modal.find('.ok').removeClass('btn-success').addClass(
'btn-primary');
modal.find('.cancel').hide();
return {
id : id,
on : function(callback) {
if (callback && callback instanceof Function) {
modal.find('.ok').click(function() {
callback(true);
});
}
},
hide : function(callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function(e) {
callback(e);
});
}
}
};
},
confirm : function(options) {
var id = init(options);
var modal = $('#' + id);
modal.find('.ok').removeClass('btn-primary').addClass(
'btn-success');
modal.find('.cancel').show();
return {
id : id,
on : function(callback) {
if (callback && callback instanceof Function) {
modal.find('.ok').click(function() {
callback(true);
});
modal.find('.cancel').click(function() {
callback(false);
});
}
},
hide : function(callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function(e) {
callback(e);
});
}
}
};
},
dialog : function(options) {
options = $.extend({}, {
title : 'title',
url : '',
width : 800,
height : 550,
onReady : function() {
},
onShown : function(e) {
}
}, options || {});
var modalId = generateId();
var content = dialogdHtml.replace(reg, function(node, key) {
return {
Id : modalId,
Title : options.title
}[key];
});
$('body').append(content);
var target = $('#' + modalId);
target.find('.modal-body').load(options.url);
if (options.onReady())
options.onReady.call(target);
target.modal();
target.on('shown.bs.modal', function(e) {
if (options.onReady(e))
options.onReady.call(target, e);
});
target.on('hide.bs.modal', function(e) {
$('body').find(target).remove();
});
}
}
}();
})(jQuery);
