基于Bootstrap的表格插件bootstrap-table
2018-08-10 11:14:27来源：博客园 阅读 ()
写在前面：
表格在项目中是使用比较多的，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});
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 基于数据库的代码自动生成工具，生成JavaBean、生成数据库文 2020-05-31
- 数据分析 | 基于智能标签，精准管理数据 2020-05-30
- 不用找了，基于 Redis 的分布式锁实战来了！ 2020-05-26
- Spring02_基于XML的IOC 2020-05-24
- Spring 基于自动装配的依赖注入详解 [自动装配模式搞不懂？ 2020-05-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
