使用Bootstrap實現表格列的顯示與隱藏

本文轉載自查看原文 2019-04-18 15:13 1925

來人，上效果圖

　　 <!--插件開-->
    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-editable.css">
    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-table.min.css">
    <!-- JavaScript -->
    <script src="__PUBLIC__/jquery/3jquery.min.js"></script>

    <script src="__PUBLIC__/btjs/bootstrap.min.js"></script>
    <script src="__PUBLIC__/btjs/bootstrap-editable.min.js"></script>
    <script src="__PUBLIC__/btjs/bootstrap-table.js"></script>
    <script src="__PUBLIC__/btjs/bootstrap-table-zh-CN.js"></script>

    <!--插件結-->
    <!-- Page Specific Plugins -->
    <script src="__PUBLIC__/btjs/raphael-min.js"></script>
    <script src="__PUBLIC__/btjs/tablesorter/jquery.tablesorter.js"></script>

2、糊代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <!--插件開-->
    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-editable.css">
    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-table.min.css">
    <!-- JavaScript -->
    <script src="__PUBLIC__/jquery/3jquery.min.js"></script>

    <script src="__PUBLIC__/btjs/bootstrap.min.js"></script>
    <script src="__PUBLIC__/btjs/bootstrap-editable.min.js"></script>
    <script src="__PUBLIC__/btjs/bootstrap-table.js"></script>
    <script src="__PUBLIC__/btjs/bootstrap-table-zh-CN.js"></script>

    <!--插件結-->
    <!-- Page Specific Plugins -->
    <script src="__PUBLIC__/btjs/raphael-min.js"></script>
    <script src="__PUBLIC__/btjs/tablesorter/jquery.tablesorter.js"></script>


</head>
<body style=" margin-top: 0px;">
<div class="tplay-body-div">
    <table class="table table-bordered table-hover table-striped tablesorter"
           data-toggle="table"  ///////////////////////////////////////////////////////////重點在這！！！！！！！敲黑板！！！！！！！！！下次要考！！！！！！！！！！！！！！！！！！
           data-pagination="false"
           data-pagination-loop="false"
           data-search="true"
           data-show-pagination-switch="false"
           data-show-columns="true"
           data-page-number="1"
           data-page-size="5"
           data-page-list="[5,10,25]"
           data-click-to-select="true"
           data-single-select="true"
           data-striped="true">

        <thead>
        <tr>
            {volist name="fieldinfo" id="val"}
            <th >{$val.Comment}</th>
            {/volist}
        </tr>
        </thead>
        <tbody>
            {volist name="data" id="v"}
            <tr>
                {volist name="field" id="z"}
                <td>{$v["$z"]}</td>
                {/volist}
            </tr>
            {/volist}
        </tbody>
    </table>
    {$data->render()}
</div>

<script src="__PUBLIC__/jquery/jquery.min.js"></script>
</body>
</html>

3、文件全部引入后，可能會出現沒有圖標的問題，沒關系，在 bootstrap.min.css 同級的文件下放入 bootstrap-theme.min.css ，萬事大吉

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue3 實現表格列拖拽排序、顯示隱藏；以及行內編輯表格自帶校驗 vue+elementUI表格列顯示隱藏遇到bug [Javascript] 動態隱藏和顯示 Layui 數據表格的列 layui隱藏表格列 js如何實現點擊顯示和隱藏表格如何使用Bootstrap4顯示和隱藏元素使用 iview Table 表格組件修改操作的顯示隱藏 EasyUI datagrid列隱藏與顯示隱藏或顯示GridView控件列 jquery datatable隱藏和顯示列