一、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();
}
四、参考官方例子
相关参考链接:
相关推荐
同时，还需要引入X-Editable的CSS和JS文件，并调用初始化方法，例如`$('#table').bootstrapTable('editable', { ... })`。 对于“数据为空”（Empty）的问题，这可能是因为表格的数据源中某个字段值为null或者空...
$('#myTable').bootstrapTable({ columns: [ { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'city', title: '城市' } ], data: [ /* 数据数组 */ ] }); }); ``` 总结，...
$('#table').bootstrapTable({ data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] }); }); ``` 2. **主要特性** - **排序**：通过设置`data-field`属性，...
$('#myTable').bootstrapTable({ columns: [/* 列定义 */], data: [] }); ``` 总结： 通过以上步骤，我们可以成功地在 Bootstrap Table 中实现总数量统计功能。在实际应用中，可能需要根据具体的需求和数据...
总结一下，要在Bootstrap Table中实现列宽拖动功能，需要按照以下步骤操作： 1. 引入Resizable扩展插件以及它的依赖库colResizable。 2. 在HTML的thead元素中为每个列定义data-field和data-width属性。 3. 使用...
总结来说，Bootstrap Table 是一个强大且灵活的前端表格组件，它利用 Bootstrap 的样式，提供了丰富的功能和优秀的用户体验。通过学习和使用这个组件，开发者可以快速构建出具有专业水准的网页表格。
4. **docs**（可能不在提供的压缩包内）：文档目录，包含Bootstrap的官方文档，可以帮助开发者了解每个组件的用法和API。 关于Bootstrap表格，它是Bootstrap框架的一部分，提供了样式化的HTML表格。通过添加特定的...
在本教程的背景设置中，博主已经分享了关于如何使用KnockoutJS和BootstrapTable的基础用法，但之前的应用并没有发挥出MVVM模式的全部潜能。博主希望在即将开展的项目中充分利用KnockoutJS的优势，因此对KnockoutJS与...
【JS表格组件BootstrapTable行内编辑解决方案x-editable】 在前端开发中，表格组件是常见的数据展示工具，而BootstrapTable是一款强大的JS表格组件，它提供了丰富的功能，包括行内编辑。行内编辑允许用户直接在表格...
三、BootstrapTable配置与用法 BootstrapTable的treegrid功能可以通过设置`bootstrap-table`的扩展选项来启用。例如，你可能需要设置`data-toggle="table"`、`data-treegrid`以及`data-show-toggle`等属性。同时，...
Bootstrap Table 是一个基于 Bootstrap 框架的 jQuery 插件，它为网页中的表格提供了丰富的功能，如单选、多选、排序、分页、编辑、导出和过滤。这个插件的设计目标是通过简洁的配置，让开发者能够快速实现复杂的...
$table.bootstrapTable('exportFile', { type: 'excel', // 导出类型 filename: 'myData' // 文件名 }); ``` 除了上述特性，Bootstrap Table 还允许用户自定义列的显示与隐藏、配置分页参数、实现服务器端分页和...
BootstrapTable是一款基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能，如表格排序、分页、筛选等。在实际应用中，我们可能需要动态地更新表格中的数据，这时就涉及到了`refresh`和`refreshOptions`两个...
例如，通过使用`.table`类，可以快速创建基本的表格样式，而`.table-responsive`类则能使表格在较小的设备上滚动查看。为了动态生成表格，我们需要在JavaScript或jQuery中操作DOM（文档对象模型），根据需要添加或...
总结，"table控件"在Web开发中扮演着重要角色。从基础的HTML表格到复杂的JavaScript实现，掌握其使用方法和相关工具对于提升开发效率和用户体验至关重要。无论你是初学者还是经验丰富的开发者，不断探索和学习新的...
如果你希望深入学习Bootstrap，可以参考提供的相关教程，如Bootstrap学习教程、Bootstrap实战教程、Bootstrap Table使用教程以及Bootstrap插件使用教程。这些教程将帮助你掌握Bootstrap的各个方面，包括布局、组件、...
总结，这个Bootstrap 3离线参考手册是开发者不可或缺的工具，它详细介绍了框架的各种组件和用法，帮助开发者高效地创建响应式、易用的网页界面。无论你是初学者还是经验丰富的开发者，都可以从中受益。
通过学习本教程，读者将能够掌握Bootstrap的基本用法，并能独立创建自己的网站页面。 #### 二、基础知识与准备工作 **1. HTML5文档类型声明** 在任何基于Bootstrap的网页中，首先需要定义一个HTML5文档类型，即`...