zoukankan      html  css  js  c++  java
  • 使用Bootstrap实现表格列的显示与隐藏

    来人,上效果图

     走官方通道

    1、引入样式文件(去github下载样式文件

       <!--插件开-->
        <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 ,万事大吉

    let the world have no hard-to-write code ^-^
  • 相关阅读:
    字符串数组转化成json格式
    php关于发送和接受二进制数据
    thinkphp路径问题
    fread与file_get_contents读取函数文件
    php用urlencode、urldecode解决汉字乱码问题
    ThinkPHP关于数据库的操作
    Pytorch中torch.autograd ---backward函数的使用方法详细解析,具体例子分析
    TensorFlow tf.gradients的用法详细解析以及具体例子
    好用的函数,assert,random.sample,seaborn tsplot, tensorflow.python.platform flags 等,持续更新
    pytorch autograd backward函数中 retain_graph参数的作用,简单例子分析,以及create_graph参数的作用
  • 原文地址:https://www.cnblogs.com/ovim/p/10729758.html
Copyright © 2011-2022 走看看