基于Bootstrap的表格插件bootstrap-table
写在前面：
表格在项目中是使用比较多的，bootstrap-table插件也是非常好用，而且表格页面也比较好看。这里也简单的记录下。
下面直接看demo吧，代码中都注释了，有些用法，这里没有用到，需要用到的可以在网上查查。例子有很多的。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String scheme = request.getScheme();
String serverName = request.getServerName();
String contextPath = request.getContextPath();
int port = request.getServerPort();
//网站的访问跟路径
String baseURL = scheme + "://" + serverName + ":" + port
+ contextPath;
request.setAttribute("baseURL", baseURL);
System.out.println("baseURL:" + baseURL);
%>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>bootstrap-select测试</title>
<%--导入bootstrap与table样式--%>
<link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" />
<link href="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<%--先导入jqury插件--%>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<%--导入bootstrap插件--%>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
<%--table插件--%>
<script src="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.js"></script> <style type="text/css">
/*解决设置表头列宽无效*/
#table{
table-layout: fixed;
}
/*给表格边框加颜色*/
table,table tr th, table tr td {
border:1px solid #fac090;
}
</style>
</head>
<body>
<div style="">
<%--给table一个id--%>
<table id="mytable"></table>
</div>
</body>
<script>
$(function(){
//初始化Table
var personTable = $('#mytable').bootstrapTable({
url: '${baseURL}/listAllSAPerson',//请求后台的URL（*）
method: 'get',//请求方式（*）
dataType: "json", //服务器返回的数据类型
toolbar: '#toolbar',//工具按钮用哪个容器
striped: true,//是否显示行间隔色
sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,//初始化加载第一页，默认第一页 设置了分页首页页码
pageSize: 4,//每页的记录行数（*）
pageList: [2, 4, 6, 8],//可供选择的每页的行数（*）
showPaginationSwitch:false,//是否显示数据条数选择框
cache: false,//是否使用缓存 ，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,//是否显示分页（*）
sortable: true,//是否启用排序
sortName: "perCode", //按照perCode排序
sortOrder: "asc",//排序方式
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这里是分页用的
return {//这里的params是table提供的
startIndex: params.offset,//从数据库第几条记录开始,使用offset后台分页查询时不用再减去1
pageSize: params.limit//每页记录数
//后台要用名字相同的变量来接收比如，这里后台要用startIndex,pageSize两个变量来分别进行接收
};
},//传递参数（*）
// search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
//showColumns: true,//是否显示内容列下拉框
//showRefresh: true,//是否显示刷新按钮
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//是否启用点击选中行
//height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
//width:'50%',
uniqueId: "perCode",//每一行的唯一标识，一般为主键列
//showToggle: true,//是否显示详细视图和列表视图的切换按钮
cardView: false,//是否显示详细视图
detailView: false,//是否显示父子表
checkboxHeader :false, //隐藏表头的checkbox
singleSelect: true, //开启单选
columns: [
{
checkbox:true //每一行前面是否开启checkbox
},
{
field: 'perCode',
title: 'ID',
valign:'middle',
align:'center',
visible:true, //隐藏
width:'100px', //解决设置表头列宽无效样式后 这里的width才会生效
//colspan:2,
//设置列样式
/*cellStyle:{
css:{"background-color":"#fac090"}
}*/
},
{
field: 'perName',
title: 'Name',
align:'center',
width:'100px'
},
{
field: 'role',
title: 'Role',
align:'center',
width:'100px'
},
{
field: 'stateName',
title: 'Status',
align:'center',
width:'100px'
}
],
//设置行样式
rowStyle: function (row, index) {
//根据获取perCode来判断是否删除了 来显示删除线样式
if (row.perCode == "W01"){
//设置为删除样式 根据自己的项目需求来
return {css:{"text-decoration":"line-through","color":"red"}}
}else{
return {css:{"background-color":"white"}}
}
//这里也可设置行间隔色
/*if(index % 2 == 0){
return {css:{"background-color":"greed"}}
}else{
return {css:{"background-color":"yellow"}}
}
*/
},
});
});
</script>
</html>
这样一个table就出来了，下面是它的效果图:
用法也还是很方便简单的，对于每一行的颜色，或者每一列的颜色，也可以自己去修改设置。对于表格一般都会涉及到分页，分页传递的参数在queryParams中进行设置，在代码中也做了例子，参照代码就可以了。
除了使用分页外，有时候会带条件查询表格，那么这个时候就需要将需要查询的参数加入到queryParams中，然后传到后台了，比较常见的用法是表单条件查询，下面是代码：
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这里是分页用的
//如果是条件查询 这里要带上查询条件 不然 点击下一页不会带条件查询
var p = serializeForm($("#header_form")) || {};
p.startIndex = params.offset,//从数据库第几条记录开始
p.pageSize = params.limit//每页记录数
return p;
},//传递参数（*）
//序列化表单
function serializeForm(form){
var obj = {};
$.each(form.serializeArray(),function(index){
if(obj[this['name']]){
obj[this['name']] = obj[this['name']] + ','+this['value'];
} else {
obj[this['name']] =this['value'];
}
});
return obj;
}
好了，分页带条件注意的就是这么多了，感觉写起来也没多少要注意的，对了，对于后台返回对应的json格式的数据，
Map<String,Object> map = new HashMap<>();
map.put("rows",voList);
map.put("total",totalCount);
JsonConfig jsonConfig=new JsonConfig();
jsonConfig.registerJsonValueProcessor(Date.class,new JsonDateValueProcessor());
jsonObject = JSONObject.fromObject(map, jsonConfig);
这里需要的是rows与total、都是小写的，不要写成了大写，具体的数据的返回，这里就不多做代码展示了，之前写ligerUI中都有对应的代码介绍，这里虽然使用的是bootstrap，但是由于传递json数据给前台页面的方法都是一致的，就不再重复多说了。
当需要重新加载表格的时候，也可以使用这种方式
//$("#table").bootstrapTable("refresh",{ url: "${baseURL}/listAllDemo","query":{"id":"333"}}); //单个条件查询
//表单条件查询 还是先序列化表单
var queryData = serializeForm($("#header_form"));;
$("#table").bootstrapTable("refresh",{ url: "${baseURL}/listAllSAPerson","query":queryData});
基于Bootstrap的表格插件bootstrap-table的更多相关文章
- 好用的自适应表格插件-bootstrap table （支持固定表头）
最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...
- 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
- bootstrap 分页表格插件
找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...
- 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理
在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...
- bootstrap表格插件——Bootstrap-Table
注:本文引用自:http://www.cnblogs.com/wuhuacong/p/7284420.html 一.概述 1.是什么 是一个基于bootstrap的灌数据式的表格插件 2.能干什么 可 ...
- 基于bootstrap 的datatable插件的使用（php版）
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- bootstrap-paginator基于bootstrap的分页插件
bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...
随机推荐
- 初识 HTML5（一）
H5其实就是H4的一个增强版本,我们在利用H5进行网页的构造会更简便,标签语义更简洁明了.首先,我们要理解HTML4,它是HTML的标记+css2+JavaScript的一些基本应用,简言之,就是AP ...
- InnoDB 存储引擎的线程与内存池
InnoDB 存储引擎的线程与内存池 InnoDB体系结构如下: 后台线程: 1.后台线程的主要作用是负责刷新内存池中的数据,保证缓冲池中的内存缓存的是最近的数据: 2.另外,将以修改的数据文件刷 ...
- MVC4.0 bug 神奇的是事情 bool 值变成了 onclick ,非常奇怪的
foreach (var item in ViewBag.PhotoGroupList) { // 这里很奇怪 item.IS_DISPLAY 是布尔值 如果直接写 @item.IS_DISPLAY ...
- [UOJ#131][BZOJ4199][NOI2015]品酒大会
[UOJ#131][BZOJ4199][NOI2015]品酒大会 试题描述 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个 ...
- [poj] 3090 Visible Lattice Points
原题 欧拉函数 我们发现,对于每一个斜率来说,这条直线上的点,只有gcd(x,y)=1时可行,所以求欧拉函数的前缀和.2*f[n]+1即为答案. #include<cstdio> #def ...
- BZOJ3668 [Noi2014]起床困难综合症 【贪心】
题目 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过研究相关文献,他找到了该病的发病原因 ...
- DLP与上网行为管理的差别总结
参考网康和深信服的上网行为管理手册,总结了一下DLP与上网行为管理的差别: DLP与上网行为管理在功能和使用目的上有很大不同.主要体现在: 上网行为管理主要是对用户访问目标URL过滤,应用端口限制,上 ...
- Tomcat学习笔记(十)
StandardWrapper容器 Context容器包含一个或者多个Wrapper实例,每个Wrapper实例表示一个具体的servlet定义. 方法调用序列 具体过程 (1)连接器创建reques ...
- #!/bin/sh简介
第一次学shell编程,看的文章中说shell程序必须以"#!/bin/sh"开始,也就认为是这样了,虽然知道在shell中以"#"开始的语句都是注释,但也从没 ...
- 写一个system.data.entity的simpledatarepo，实现crudq这些功能，不需要引入entityframework,直接可以使用，用到objectset
note:you can delete reference of entityframework when using this classes.it`s just a simple repohelp ...