bob体育官方平台
bootstrap table小案例_javascript技巧_脚本之家

在表格中设置data-toggle=“table”,此方式可以在不写JavaScript的情况下启用Bootstrap Table。

1.  实现原理

主要思想还是讲将表头做悬浮状,浮于表格内容的上方.可以使用js和css样式进行实现.

bootstrap.min.css

实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

3.1. 页面head引入文件列表

  1. 引入jquery文件

<script script src="../resources/jquery/jquery-1.12.4.min.js" th:src="@{/resources/jquery/jquery-1.12.4.min.js}" type="text/javascript"></script>

  1. 引入bootstrap的基本文件

<link href="../resources/bootstrap/bootstrap.min.css" th:href="@{/resources/bootstrap/bootstrap.min.css}" rel="stylesheet" type="text/css"/>

<script src="../resources/bootstrap/bootstrap.min.js" th:src="@{/resources/bootstrap/bootstrap.min.js}" type="text/javascript"></script>

  1. 引入bootstrap-table基础文件

<link href="../resources/bootstrap-table/bootstrap-table.min.css" th:href="@{/resources/bootstrap-table/bootstrap-table.css}" rel="stylesheet" type="text/css"/>

<script  src="../resources/bootstrap-table/bootstrap-table.min.js" th:src="@{/resources/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>

<script src="../resources/bootstrap-table/bootstrap-table-zh-CN.min.js" th:src="@{/resources/bootstrap-table/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>

  1. 自定义样式表

<!-- .table样式为定义表,列宽由表格宽度和列宽度设定。

    .fixed-table-container自定义表的高度,这个可以根据自己需要设定,也可以不设定,不设定的话,默认是屏幕高度

-->

<style type="text/css">

    .table{

        table-layout: fixed;

    }

    .fixed-table-container{

        height: 400px !important;

    }

</style>

...

3.2. 页面body

<body>

    <div>

        <table class="table" id="demo_table"></table>

    </div>

    <script th:inline="javascript" type="text/javascript">

        $(function() {

            //1.初始化Table

            var oTable = new TableInit();

            oTable.Init();

            //2.固定表头

            initDate();

        });

        function initDate(){

            $('.date-picker').datepicker({autoclose:true}).next().on(ace.click_event, function(){

                $(this).prev().focus();

            });

            $('input[name=date-range-picker]').daterangepicker().prev().on(ace.click_event, function(){

                $(this).next().focus();

            });

       }

        var TableInit = function() {

            var oTableInit = new Object();

            //初始化

            TableoTableInit.Init = function() {

                $('#demo_table').bootstrapTable({

                    height: getTableHeight(),

                    url: urlProjInfo,//请求url

                    method: 'post', //请求方式(*)

                    striped: true, //是否显示行间隔色

                    cache: false, //是否使用缓存

                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",

                    sortable: false, //是否启用排序

                    queryParamsType: "undefined", 

                    queryParams: oTableInit.queryParams, //传递参数(*)

                    responseHandler: function(res) {return res.result;},

                    pagination: true, //是否显示分页(*)

                    paginationVAlign: "top", //设置分页条的位置

                    paginationDetailHAlign: "right",

                    paginationHAlign: "right",

                    pageNumber: 1, //初始化加载第一页,默认第一页

                    pageSize: 20,

                    pageList: [10, 20, 50],

                    sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)            

                    minimumCountColumns: 2, //最少允许的列数

                    clickToSelect: true,

                     uniqueId: "ID",

                    checkboxHeader: true, //设置false 将在列头隐藏check-all 

                    checkboxshowExport: false,

                    exportfileName: '项目信息',

                    columns: [{

                        field: "ID",

                        title: '项目id',

                        align: "center",

                        width:"110px",

                        hidden: "true"

                    }, {

                        field: 'PROJECT_NAME',

                        title: '项目名称',

                        width:"144px",

                        align: "center"

                    },{

                        field: 'ROOM_NAME',

                        title: '机房名称',

                        width:"180px",

                        align: "center"

                    },{

                         field: 'CUSTOMER_MANAGER',

                         title: '客户经理',

                        width:"110px",

                        align: "center"

                    },{

                        field: 'PJ_MANAGER',

                        title: '项目经理',

                        width:"110px",

                        align: "center"

                    },{

                        field: 'INPUT_DATE',

                        title: '创建日期',

                        width:"110px",

                        align: "center"

                    }, {

                        title: '操作',

                        field: 'Id11',

                        align: "center",

                       width:"110px",

                        formatter: formatOperat

                    }]

                });

                $('#stock_table').bootstrapTable('hideColumn', 'ID');

                function formatOperat(value,row,index){

                        return [ '查看' ].join('');

                }

            };

            //得到查询的参数

            oTableInit.queryParams = function(params) {

                if(!params.limit) {

                    params.limit = params.pageSize;

                }

                if(!params.offset) {

                    params.offset = params.pageNumber;

                }

                var temp = { 

                    //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

                    page_number: params.offset, //页面大小

                    line: params.limit, //页码

                    ROOM_PROPERTY:"1",

                    ID: $("#ID").val(),

                    PROJECT_NAME: $("#PROJECT_NAME").val(),

                    ROOM_NAME: $("#ROOM_NAME").val(),

                    CUSTOMER_MANAGER: $("#CUSTOMER_MANAGER").val(),

                    PJ_MANAGER: $("#PJ_MANAGER").val(),

                    INPUT_DATE: $("#INPUT_DATE").val()

                };

                return temp;

            };

            return oTableInit;

        };

    </script>

</body>

效果图

图片 1

图片 2

jquery.min.js

2. 注意事项

要固定好表格的宽度,这样子才不会有表数据和表头对应不一致问题的出现.

bootstrap-table.css

引言

很多情况下,我们都要写一些报表,在数据量比较大的情况下,会造成表内容太多,表比较长,需要用侧栏的下拉条进行查看数据--这个本身没有什么问题;但是领导们一般很喜欢,表头固定住,无论怎么下拉,界面就这么大,内容便就好了,表头和表里面数据还是要对应好的.所以需求就提出来了:锁定表头,纵向拉伸,改变表内容,表头不变.

  Bootstrap Table的demo     

3. 代码

下面直接粘贴web的主要代码,后端接口,就略掉了,因为此文主要是介绍表头锁定的,等下篇会写前后台交互.~_~

bootstrap.min.js

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

返回顶部