BootStrap 及BootStrap Table使用记录，内附修改分页文字显示

最新推荐文章于 2021-09-15 09:14:10 发布

csdn_c_o_m

最新推荐文章于 2021-09-15 09:14:10 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： bootstrap jquery 前端

本文链接：https://blog.csdn.net/CSDN_c_o_m/article/details/105962900

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近期给女朋友做一个工作清单的Table List，使用到了BootStrap 以及 Bootstrap Table ，做简单记录

最终代码如下

<!doctype html>
<html lang="zh-CN">
<head>
    <meta http-equiv="x-ua-compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap-table.min.css">
    <title>甜叭叭专用工作清单</title>
</head>
<script src="../static/jQuery/jquery-2.1.0.min.js"></script>
<script src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../static/bootstrap-3.3.7-dist/js/bootstrap-table.min.js"></script>
<script src="../static/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.properties"></script>
<body>
<script>
    $(function () {
        var quadrant = [1, 0];//定义象限
        for (var i = 1; i <= 4; i++) {
            $('#table_' + i).bootstrapTable({
                method: 'post',
                url: "getSchedules.do",
                striped: true, // 是否显示行间隔色
                pageNumber: 1, // 初始化加载第一页
                pagination: true, // 是否分页
                sidePagination: 'client', // server:服务器端分页|client：前端分页
                pageSize: 5,
                pageList: [5, 20, 30],
                clickToSelect: true,
                rowStyle: function (row, index) {
                    //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                    var strclass = "";
                    if (row.id % 2 == 0) {
                        strclass = 'table-active';//还有一个active
                    }
                    return {classes: strclass}
                },
                queryParams:
                    {
                        "emergency": quadrant[0],
                        "important": quadrant[0],
                        align: 'center',
                    },
                columns: [{
                    field: 'id',
                    title: '序号',
                    align: 'center'
                }, {
                    field: 'projectname',
                    title: '项目名称',
                    align: 'center'
                }, {
                    field: 'state',
                    title: '状态',
                    align: 'center'
                }, {
                    field: 'cretime',
                    title: '创建时间',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var time = row.cretime;
                        if (time == null) {
                            return "";
                        } else {
                            var sj = time.substr(0, 16).replace("T", " ");
                            return sj;
                        }
                    }
                }]
            })
        }
    })
</script>
<div class="container-fluid">
    <div class="col-md-2">
        <div class="panel panel-default">
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="table_1" class="table"></div>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="table_2" class="table"></div>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="panel panel-default">
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="table_3" class="table"></div>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="table_4" class="table"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

1.引入包相关css，js文件（见附件）

注意：jQuery文件是必要的，因为都以jquery为基础；

文件下载可以去官网，如果官网太慢的话，可以使用官网中如下cdn地址粘贴在地址栏，然后将文件保存成相应的文件名即可.我在这儿折腾了半天，所以最后会将我的下载下来的文件打成包分享，均是2020-05-07最新版本.

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

注意：静态文件需在springboot中声明静态文件location；

#静态资源 springBoot配置
spring.mvc.static-path-pattern=/static/**
spring.resources.static-locations=classpath:/static/

后附代码

<head>
    <meta http-equiv="x-ua-compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap-table.min.css">
    <title>甜叭叭专用工作清单</title>
</head>
<script src="../static/jQuery/jquery-2.1.0.min.js"></script>
<script src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../static/bootstrap-3.3.7-dist/js/bootstrap-table.min.js"></script>
<script src="../static/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.properties"></script>

2.bootStrap 主要使用了其栅格模式

定义设备窗口

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

页面div部分

<div class="container-fluid">
    <div class="col-md-2">
        <div class="panel panel-default">
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="table_1" class="table"></div>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="table_2" class="table"></div>
            </div>
        </div>
    </div>

</div>

--container 代表容器，container-fluid 是指占屏幕100%，当然也可以直接写container ；

--col-md-* 其中*可有1-12代替，代表了*/12的比例，例如col-md-6 代表占屏幕一般，其中有解释说col-md-* col-xs-*中的 md ，xs等代表了不同屏幕的大小，例如一个col-xs-8 和一个同样的col-xs-5 如果在xs标准大小的屏幕中，因为 5+8>12，所以会显示两行，但是如果在大点的屏幕中，如md 中，就会显示一行；

最开始的时候包引入不太对，走了点弯路，现将两个表整合了.

3.BootStrap Table

和工作中用到的AjaxTable很类似.简单上手，现整理参数

var $table;
          //初始化bootstrap-table的内容
          function InitMainTable () {
              //记录页面bootstrap-table全局变量$table，方便应用
              var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
             $table = $('#grid').bootstrapTable({
                  url: queryUrl,                      //请求后台的URL（*）
                  method: 'GET',                      //请求方式（*）
                  //toolbar: '#toolbar',              //工具按钮用哪个容器
                 striped: true,                      //是否显示行间隔色
                 cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                 pagination: true,                   //是否显示分页（*）
                 sortable: true,                     //是否启用排序
                 sortOrder: "asc",                   //排序方式
                 sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                 pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                 pageSize: rows,                     //每页的记录行数（*）
                 pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                 search: false,                      //是否显示表格搜索
                 strictSearch: true,
                 showColumns: true,                  //是否显示所有的列（选择显示的列）
                 showRefresh: true,                  //是否显示刷新按钮
                 minimumCountColumns: 2,             //最少允许的列数
                 clickToSelect: true,                //是否启用点击选中行
                 //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                 uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                 showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                 cardView: false,                    //是否显示详细视图
                 detailView: false,                  //是否显示父子表
                 //得到查询的参数
                 queryParams : function (params) {
                     //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                     var temp = {   
                         rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                         sort: params.sort,      //排序列名  
                         sortOrder: params.order //排位命令（desc，asc） 
                     };
                    return temp;
                 },

--以下参数是我自己写的------------------

/*queryParams:
    {
        "emergency": quadrant[0],
        "important": quadrant[0],
        align: 'center',
    },*/
columns: [{
    field: 'id',
    title: '序号',
    align: 'center'
}, {
    field: 'projectname',
    title: '项目名称',
    align: 'center'
}, {
    field: 'state',
    title: '状态',
    align: 'center'
}, {
    field: 'cretime',
    title: '创建时间',
    align: 'center',
    formatter: function (value, row, index) {
        var time = row.cretime;
        if (time == null) {
            return "";
        } else {
            var sj = time.substr(0, 16).replace("T", " ");
            return sj;
        }
    }
}]

------------------------------

                 onLoadSuccess: function () {
                 },
                 onLoadError: function () {
                     showTips("数据加载失败！");
                 },
                 onDblClickRow: function (row, $element) {
                     var id = row.ID;
                     EditViewById(id, 'view');
                 },
             });
         };

其中也都比较好理解，返回Lis的列明只需要和field名称相同就可以了.

最后我有一个对时间的格式化，因为我用的mySql，所以时间格式可能不一样，可根据具体前端dubug获取具体时间参数然后自行格式化.

4.最后我是觉得默认的分页工具下边的框对于我的来说字太啰嗦了，所以寻找方法简化，最后在引人的bootstrap-table-zh-CN.min.properties 中找到，可以先将js文件转换为properties文件，然后IDEA--》SETTING -->选择图示按钮 apply成功转化为人能看懂的文字，然后就可以自由发挥了,最后别忘了把js格式改回来..

附最后我的简略成果图

csdn_c_o_m

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap 及BootStrap Table使用记录，内附修改分页文字显示

近期给女朋友做一个工作清单的Table List，使用到了BootStrap 以及 Bootstrap Table ，做简单记录1.引入包相关css，js文件（见附件）注意：jQuery文件是必要的，因为都以jquery为基础；文件下载可以去官网，如果官网太慢的话，可以使用官网中如下cdn地址粘贴在地址栏，然后将文件保存成相应的文件名即可.我在这儿折腾了半天，所以最后会将我的下载...
复制链接

扫一扫