一、bootstrap table简介
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。相关介绍请参考官方网址：http://bootstrap-table.wenzhixin.net.cn/
二、这次项目中页面展示
三、使用方法
（1）引入js css
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> <script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script> <script src="js/bootstrap/bootstrap.min.js"></script> <script src="js/bootstrap/bootstrap-table.js"></script> <script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>
（2）数据填充
bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据
<table data-toggle="table">
<thead>
...
</thead>
</table>
$('#table').bootstrapTable({
url: 'data.json'
});
表格的初始化，其中用到了动态生成列：
var $table = $('#table'), $remove = $('#remove'), selections = [], isAuditValue, isSignedValue, groupIdValue;
var $queryByCondition = $("#queryByCondition");
var columnsValue = [
{
field : 'state',
checkbox: true,
align : 'center'
}, {
field : 'incrementId',
title : '编号',
sortable : true,
align : 'center'
}, {
field : 'name',
title : '姓名',
sortable : true,
editable : true,
align : 'center'
}, {
field : 'telephone',
title : '电话',
sortable : true,
editable : true,
align : 'center'
}, {
field : 'email',
title : '邮箱',
sortable : true,
editable : true,
align : 'center'
}, {
field : 'groupId',
title : '分组',
editable : true,
align : 'center'
}, {
field : 'isAudit',
title : '审核状态',
align : 'center',
formatter : formatStatus
}, {
field : 'isSigned',
title : '签到',
align : 'center',
formatter : formatStatus
}, {
field : 'isNotified',
title : '通知',
align : 'center',
formatter: formatNotify
}, {
field : 'isReminded',
title : '提醒',
align : 'center',
formatter : formatRemind
}, {
field : 'comment',
title : '备注',
align : 'center',
editable : true,
formatter : formatComment
} , {
field : 'createTime',
title : '注册时间',
align : 'center'
}, {
field : 'id',
title : 'id',
sortable : true,
align : 'center',
visible : false
}];
$(document).ready(function() {
initColumns();
});
function initColumns(){
var meetingId = $('#meeting_id').val();
$.ajax({
url : "form/queryByMeetingId?meetingId=" + meetingId,
type : "POST",
success : function(respdata) {
if (respdata != null) {
// console.info(respdata.listColumns);
var obj = respdata.listColumns;
for(var i=0;i<obj.length;i++){
columnsValue.push(obj[i]);
}
initTable(columnsValue);
getCount("isRegist", "1", "registed_count");
getCount("isSgetColumnsValueigned", "1", "signed_up_count");
getCount("isAudit", "1", "audited_count");
getCount("isNotified", "1", "notified_count");
getCount("isRemind", "1", "reminded_count");
} else {
PopupMessage(1, "列初始化出错，请稍后重试。", 2000);
}
}
});
}
function initTable(initColumnsValue) {
var meetingId = $('#meeting_id').val();
$table
.bootstrapTable({
url : "custom/customQueryData?meetingId=" + meetingId, // 请求后台的URL（*）
method : 'post',
striped : true, // 是否显示行间隔色
cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
queryParams : queryParams,// 传递参数（*）
columns : initColumnsValue
});
// sometimes footer render error.
setTimeout(function() {
$table.bootstrapTable('resetView');
}, 200);
$table.on('check.bs.table uncheck.bs.table '
+ 'check-all.bs.table uncheck-all.bs.table', function() {
$remove
.prop('disabled',
!$table.bootstrapTable('getSelections').length);
// save your data, here just save the current page
selections = getIdSelections();
// push or splice the selections if you want to save all data
// selections
});
$table.on('expand-row.bs.table', function(e, index, row, $detail) {
if (index % 2 == 1) {
$detail.html('Loading from ajax request...');
$.get('LICENSE', function(res) {
$detail.html(res.replace(/\n/g, '<br>'));
});
}
});
jsp页面table代码
<table id="table" data-toolbar="#toolbar" data-search="true"
data-show-refresh="true" data-show-toggle="true"
data-show-columns="true" data-show-export="true"
data-minimum-count-columns="2" data-show-pagination-switch="true"
data-pagination="true" data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false"
data-side-pagination="server" data-response-handler="responseHandler">
</table>
三、后台获取数据，这里用到了动态生成类
@ResponseBody
@RequestMapping(method = RequestMethod.POST, value = "/customQueryData")
public String customQueryData(HttpServletRequest request,
@RequestParam(value = "meetingId", required = true) String meetingId, Model model) {
String tenantId = request.getSession().getAttribute("tenantId").toString();
BufferedReader bufr;
List<Object> list = new ArrayList<Object>();
JSONObject jsonObject = new JSONObject();
try {
bufr = new BufferedReader(new InputStreamReader(request.getInputStream(), "UTF-8"));
StringBuilder sBuilder = new StringBuilder("");
String temp = "";
while ((temp = bufr.readLine()) != null) {
sBuilder.append(temp);
}
String json = sBuilder.toString();
JSONObject reqJSONObject = JSON.parseObject(json);
LOGGER.info("请求获取的数据：" + reqJSONObject);
String offset = reqJSONObject.get("offset") != null ? reqJSONObject.get("offset").toString() : "0";
String limit = reqJSONObject.get("limit") != null ? reqJSONObject.get("limit").toString() : "100";
String groupId = reqJSONObject.get("groupId") != null ? reqJSONObject.get("groupId").toString() : "";
String isAudit = reqJSONObject.get("isAudit") != null ? reqJSONObject.get("isAudit").toString() : "";
String isSigned = reqJSONObject.get("isSigned") != null ? reqJSONObject.get("isSigned").toString() : "";
if (StringUtils.isNotEmpty(offset) && StringUtils.isNotEmpty(limit) && StringUtils.isNotEmpty(meetingId)) {
Login.setTenantId(tenantId);
Integer incrementId = 1;
Meeting meeting = new Meeting();
meeting.setId(meetingId);
int totalSize = meetingRegistUserService.queryByCondition(meeting, groupId, isAudit, isSigned, null,
null, Integer.parseInt(offset), Integer.parseInt(limit), false).size();
List<MeetingRegistUser> listMeetingRegistUser = meetingRegistUserService
.queryByCondition(meeting, groupId, isAudit, isSigned, null, null, Integer.parseInt(offset),
Integer.parseInt(limit), true);
for (MeetingRegistUser meetingRegistUser : listMeetingRegistUser) {
// 设置类成员属性
Map propertyMap = new HashMap();
propertyMap.put("incrementId", Class.forName("java.lang.Integer"));
propertyMap.put("id", Class.forName("java.lang.String"));
propertyMap.put("name", Class.forName("java.lang.String"));
propertyMap.put("telephone", Class.forName("java.lang.String"));
propertyMap.put("email", Class.forName("java.lang.String"));
propertyMap.put("createTime", Class.forName("java.lang.String"));
propertyMap.put("groupId", Class.forName("java.lang.Short"));
propertyMap.put("isAudit", Class.forName("java.lang.Short"));
propertyMap.put("isSigned", Class.forName("java.lang.Short"));
propertyMap.put("isNotified", Class.forName("java.lang.Short"));
propertyMap.put("isReminded", Class.forName("java.lang.Short"));
//propertyMap.put("extendFields", Class.forName("java.lang.String"));
propertyMap.put("comment", Class.forName("java.lang.String"));
List<Fields> listFields = JSONObject.parseArray(meetingRegistUser.getCustomFields(), Fields.class);
if (null != listFields && listFields.size() > 0) {
for (Fields field : listFields) {
propertyMap.put(field.getId(), Class.forName("java.lang.String"));
}
}
//LOGGER.info("=====propertyMap=======" + JSONObject.toJSONString(propertyMap));
// 生成动态 Bean
DynamicBean bean = new DynamicBean(propertyMap);
// 给 Bean 设置值
bean.setValue("incrementId", Integer.parseInt(offset) + incrementId);
bean.setValue("id", meetingRegistUser.getId());
bean.setValue("name", meetingRegistUser.getRegistUser().getName());
bean.setValue("telephone", meetingRegistUser.getRegistUser().getTelephone());
bean.setValue("email", meetingRegistUser.getRegistUser().getEmail());
bean.setValue("createTime", meetingRegistUser.getCreateTime() != null ? new DateTime(
meetingRegistUser.getCreateTime()).toString("yyyy-MM-dd- HH:mm:ss") : "");
bean.setValue("groupId", meetingRegistUser.getGroupid());
bean.setValue("isAudit", meetingRegistUser.getIsaudit());
bean.setValue("isSigned", meetingRegistUser.getIssigned());
bean.setValue("isNotified", meetingRegistUser.getIsnotified());
bean.setValue("isReminded", meetingRegistUser.getIsreminded());
//bean.setValue("extendFields", meetingRegistUser.getCustomFields());
bean.setValue("comment", meetingRegistUser.getComment());
if (null != listFields && listFields.size() > 0) {
for (Fields field : listFields) {
bean.setValue(field.getId().toLowerCase(), field.getValue());
}
}
Object object = bean.getObject();
list.add(object);
//LOGGER.info("=====object=======" + JSONObject.toJSONString(object));
incrementId++;
}
jsonObject.put("total", totalSize);
jsonObject.put("rows", JSONObject.toJSON(list));
LOGGER.info("query data jsonObject:" + jsonObject.toString());
return jsonObject.toString();
}
} catch (Exception e) {
e.printStackTrace();
}
return jsonObject.toString();
}
四、参考官方例子
相关参考链接: