BootStrap-table的使用实现排序功能

Dream城堡

发布于 2018-12-07 10:51:19

2.1K0

发布于 2018-12-07 10:51:19

BootStrap-table的使用实现排序功能

1.Bootstrap table 官网地址:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

2.下载相应的包后引入

 <script src="./js/jquery-3.1.1.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <!-- bootstrap-table-->
    <link rel="stylesheet" href="./css/bootstrap-table.css">
    <link rel="stylesheet" href="./css/bootstrap-table.min.css">
    <script src="./js/bootstrap-table.js"></script>
    <script src="./js/bootstrap-table-zh-CN.js"></script>

3.数据填充示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Super_admin</title>
    <script src="./js/jquery-3.1.1.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <link rel="stylesheet" href="./css/bootstrap-table.css">
    <!--<link rel="stylesheet" href="./css/bootstrap-table.min.css">-->
    <script src="./js/bootstrap-table.js"></script>
    <script src="./js/bootstrap-table-zh-CN.js"></script>


    <style>

        .outer {

            width: auto;
            margin: 0 25px;
        }

        .content_body {
            width: 100%;
            border-top: 1px solid #D7D7D7;
            padding: 0;
            padding-left: 15px;
            position: relative;

        }

        /*搜索框*/

        .search .input-group {
            width: 176px;
            height: 28px;
        }

        .search .seachBtn {
            border-radius: 15px;
            background-color: #E4E4E4;
            height: 28px;
        }

        .search input {

            border-radius: 15px;
            height: 28px;
        }

        .search .search-icon {
            margin-top: 20px;
            position: relative;
            display: block;
            height: 34px;
        }

        .calendar {
            position: absolute;
            width: 188px;
            height: 28px;
            margin-top: -28px;
            margin-left: 200px;
            border-radius: 15px;
        }

        .search button.reflush {
            background-color: #246DFF;
            width: 74px;
            height: 28px;
            position: absolute;
            margin-left: 411px;
            margin-top: -28px;
            border-radius: 12px;
            text-align: center;
            line-height: 15px;
        }

        /*表格内容*/
        table {
            position: absolute;
            margin-left: -14px;
        }

        table thead {
            /*width: 1567px;*/
            margin: 0;
            width: 100%;
            height: 41px;
            background-color: #E4E4E4;
            text-align: left;
        }

        table thead ul {
            width: 84px;
            display: none;
            position: absolute;
            margin-top: 6px;
            margin-left: -5px;
            background-color: white;
            border: 1px solid #E4E4E4;
            /*阴影*/
            /*box-shadow: 1px 1px 5px #273327;*/
            padding-left: 9px;
            /*z-index: 999;*/

        }

        table thead ul li {
            display: block;
            list-style: none;
            text-align: left;
            padding-left: -40px;
        }

        table td.timeControl .upTriangle,
        table td.timeControl .downTriangle {
            display: block;
            width: 15px;
            height: 11px;
            font-size: 10px;
            margin: 0;
        }

        table td.timeControl .triangle {
            width: 15px;
            /*height: 15px;*/
            position: absolute;
            margin-top: -23px;
            margin-left: 36px;
        }

        .tableRow {
            margin-left: 0px;
        }

        a {

            color: black;
            text-decoration: none;
        }

        a:focus {
            color: black;
            text-decoration: none
        }

        a:hover {
            color: black;
            text-decoration: none
        }

        .bootstrap-table .table tbody > tr > td {
            border: none;
        }

        .bootstrap-table .table thead > tr > th {
            border: none;
        }

        .row .fixed-table-body {
            overflow-x: inherit;
            overflow-y: inherit;
            height: 100%;
            border: none;
            border-bottom: none;
        }

        .row .bootstrap-table {
            border: none;
        }

        .row .fixed-table-container {
            position: relative;
            clear: both;
            border: 0px solid #dddddd;
            border-radius: 0;
            -webkit-border-radius: 4px;

        }

        /*排序图片*/
        .row .sortable{
            width: 15px;
        }

        .row .fixed-table-container thead th .sortable {
            cursor: pointer;
            background-position: right;
            background-repeat: no-repeat;
            padding-right: 46px;
        }


    </style>
</head>
<body>

<div class="outer">

    <!--头部的块-->
    <h3> |&nbsp;&nbsp;系统日志</h3>

    <!--content_body内容块-->
    <div class="content_body container clearfix">
        <!--搜索框-->
        <div class="search">
            <div class="row">
                <div class="search-icon">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索">
                        <span class="input-group-btn">
        <button class="btn btn-default seachBtn" type="button">
            <!--搜索图标-->
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </button>
      </span>
                        <!-- /input-group -->
                    </div>
                    <!--日历选择框-->
                    <div>
                        <input class="calendar form-control" aria-describedby="basic-addon1" type="text"
                               placeholder="日历">
                    </div>

                    <button class="btn btn-primary reflush">刷新</button>
                    <!-- /.col-lg-6 -->
                </div>
                <!-- /.row -->
            </div>
        </div>


        <!--table表格信息内容-->
        <!--<div class="panel-default">-->
        <div class="row tableRow">
            <!--data-toggle="table" data-url="data1.json"-->
            <table class=" table table-condensed" id="table">
                <!--<table    class="table table-condensed">-->
                <thead>
                <tr>

                    <th data-field="msgType" class="col-lg-3">
                        <a href="#" class="msg">消息类型&nbsp;∨</a>
                        <ul class="messageType">
                            <li>消息类型1</li>
                            <li>消息类型1</li>
                            <li>消息类型1</li>
                            <li>消息类型1</li>
                        </ul>
                    </th>

                    <th data-field="time" class="timeControl col-lg-3" data-sortable="true">
                        <!--<a href="#" class="tim" >时间</a>-->
                        时间
                        <!--<div class="triangle">-->
                        <!--<span class="upTriangle">▲</span><span class="downTriangle">▼</span>-->
                        <!--</div>-->
                    </th>
                    <th data-field="sourcecome"  class="col-lg-3">
                        <a href="#" class="source">来源&nbsp;∨</a>
                        <ul class="source">
                            <li>来源1</li>
                            <li>来源2</li>
                            <li>来源3</li>
                            <li>来源4</li>
                        </ul>
                    </th>
                    <th data-field="content"  class="col-lg-3">消息内容</th>
                </tr>
                </thead>


                <tbody>
                <tr>
                    <td data-field="id">1</td>
                    <td data-field="name"> 2</td>
                    <td data-field="age">3</td>
                    <td data-field="age">4</td>

                </tr>
                </tbody>


            </table>
        </div>


        <!--content_body内容块-->
    </div>
</div>
<script>
    $(function () {
//        刷新
        $(".reflush").click(function () {
//            window.location.reload();
        })

var data= [
    {
        msgType: "msg001",
        time: "2018-09-08",
        sourcecome: "胖虎",
        content:"内容001"
    },
    {
        msgType: "msg002",
        time: "2018-12-07",
        sourcecome: "胖虎",
        content:"内容001"
    },
    {
        msgType: "msg003",
        time: "2018-10-07",
        sourcecome: "胖虎",
        content:"内容005"
    },
    {
        msgType: "msg004",
        time: "2018-11-08",
        sourcecome: "胖虎",
        content:"内容004"
    },
]
//JSON数据
        $('#table').bootstrapTable({
            data: data
        });

        $("a.msg").click(function () {
            console.log("ll");
            $("ul.messageType").toggle();
        })

        $("a.source").click(function () {
            console.log("ll");
            $("ul.source").toggle();
        })

    });
</script>

</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.11.07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap