spring bootstrap table 表格创建

前台表格插件多种样，以前用过datatable以及gridtable，这次想要尝试一个新的，就选择了bootstrap table，主要是界面定了想要用bootstrap设计界面，所以就选择了这个，bootstrap table 官网为http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/，里面对表格各种问题都有详细描述。好了，不多说了，下面来详细说明bootstrap table编写的步骤。

1、引入文件

<!-- 引入bootstrap css文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- 引入bootstrap table css文件 -->
<link href="../css/bootstrap-table.css" rel="stylesheet">
<!-- 引入jquery文件 -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<!-- 引入中文语言包 -->
<script src="../js/bootstrap-table-locale-all.js"></script>
           

从网上下载这些文件，然后放到指定文件夹下面

2、bootstrap table js 为了以后方便应用，我把js提取出来放到单独js里面，然后传参，只要传过去的参数符合要求，就可以在界面上展示改表格。

/**
 * bootstrap分页方法
 */
var TableInitSearch = function() {
    var oTableInit = new Object();
    //oTableInit.bootstrapTable('destroy');  
    // 初始化Table
    oTableInit.Init = function(id, url,columns,searchArgs) {
        //---先销毁表格 ---
        $(id).bootstrapTable('destroy');  
        $(id).bootstrapTable({
            url : url, // 请求后台的URL（*）
             method: 'post',
             contentType: "application/x-www-form-urlencoded",
             //【查询设置】
             /* queryParamsType的默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                               设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber */
             queryParamsType:'', 
             striped : false, // 是否显示行间隔色
             cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
             toolbar : '#toolbar', // 工具按钮用哪个容器
             queryParams: function queryParams(params) {  
               var param = {  
                   pageNumber: params.pageNumber,    //后台接收的时候为pageNumber
                   pageSize: params.pageSize //后台接收的时候为pageSize
               }; 
               for(var key in searchArgs){
                   param[key]=searchArgs[key]//此处查询时向后台传递的参数
               }  
               return param;                   
             }, 
             //【其它设置】
             locale:'zh-CN',//中文支持
             pagination: true,//是否开启分页（*）
             sortOrder : "asc", // 排序方式
             pageNumber:,//初始化加载第一页，默认第一页
             pageSize: ,//每页的记录行数（*）
             pageList: [ , , ,  ], // 可供选择的每页的行数（*）
             sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
             search : false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
             strictSearch : true,
             minimumCountColumns : , // 最少允许的列数
             clickToSelect : true, // 是否启用点击选中行
             showRefresh:false,//刷新按钮
             //【样式设置】
              height: ,//table的高度
             cardView : false, // 是否显示详细视图
             detailView : false, // 是否显示父子表
            columns : columns,
        });

    };
    return oTableInit;
};
           

从上图可以看出需要传递三个参数，id ，传到后台的url，以及column。

3、jsp界面

<table id="table"></table>
           

<script>
var id = "#table";
var  url = "${pageContext.request.contextPath}/user/userlist";
var  columns = [
                {
                    field : 'id',
                    title : '用户编号',
                    align : 'center',
                    valign : 'middle'
                },
                {
                    field : 'name',
                    title : '姓名',
                    align : 'center',
                    valign : 'middle'
                },
                {
                    field : 'age',
                    title : '年龄',
                    align : 'center',
                    valign : 'middle'
                }];
//1.初始化Table
var oTable = new TableInitSearch();
var searchArgs = {
        id:null,
        name:null
}
//界面初始化
$(function() {
            oTable.Init(id, url, columns, searchArgs);
        });
function toSearch() {
var name= $("input[name='name']").val();//获得input框输入的name值
var id= $("input[name='id']").val();//获得input框输入的id值
    searchArgs = {
        id: id,
        name: name
    }
    oTable.Init(id, url, columns, searchArgs);                          
} 
</script>
           

4、后台 conctroller

@RequestMapping("/userlist")
@ResponseBody 
//ajax调用
public Map<String, Object> getUsers(Integer pageSize,
        Integer pageNumber,String name,String id) {
    Map<String, Object> result = new HashMap<String, Object>();
    List<User> userlist = ........//此处为后台调用获取用户的方法
    result.put("total", total);//获取列表总数量
    result.put("rows", userlist);/获取用户数list
}
           

果然是不写不知道，一写就真的了解别人真的不是没写，有些东西真的是下意识的忽略。