一、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();
}
四、参考官方例子
相关参考链接: