使用Bootstrap实现表格列的显示与隐藏

来人，上效果图

　　 <!--插件开-->

    <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 ，万事大吉

使用Bootstrap实现表格列的显示与隐藏的更多相关文章

element-ui表格列金额显示两位小数
对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和 v-b ...
用Javascript，DHTML控制表格的某一列的显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
Plugin 表格列自定义显示隐藏插件TableCustom.js
TableCustom 案例展示下载地址 https://github.com/chaorenzeng/TableCustom.js.git 快速使用 1.引入TableCustom.css和Tab ...
js控制easyui datagrid列的显示和隐藏
easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列
DevExpres表格控件运行时动态设置表格列
本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...
table表格超出部分显示省略号
做table表格时,某一列字数比较多,希望超出宽度的部分以省略号显示设置table的布局默认automatic 以表格内容显示相应宽度改成fixed 以表格列宽显示内容 table{ ta ...
bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数表格的参数定义在 jQuery.fn.bootst ...
[转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

随机推荐

PHP后台批量删除数据
html <form action="" method="post"> <div><input type="submit ...
程序基石系列之C++多态的前提条件
准备知识 C++中多态(polymorphism)有下面三个前提条件: 必须存在一个继承体系结构. 继承体系结构中的一些类必须具有同名的virtual成员函数(virtualkeyword) 至少有一 ...
【上】安全HTTPS-全面具体解释对称加密，非对称加密，数字签名，数字证书和HTTPS
一,对称加密所谓对称加密.就是它们在编码时使用的密钥e和解码时一样d(e=d),我们就将其统称为密钥k. 对称加解密的步骤例如以下: 发送端和接收端首先要共享同样的密钥k(即通信前两方都须要知道相应 ...
LeetCode(88)题解-- Merge Sorted Array
https://leetcode.com/problems/merge-sorted-array/ 题目: Given two sorted integer arrays nums1 and nums ...
EasyDarwin开源流媒体服务器内存管理优化
-本文由EasyDarwin开源团队成员Fantasy贡献前言最近在linux上跑EasyDarwin发现一个很奇怪的问题,当有RTSPSession连接上来的时候,发现进程的虚拟内存映射一下就多 ...
SE18 BADI定义 / SE19 BADI 实现
明天花30分再研究下这个: 如果你知道一个BADI名称,可以: 1)使用SE18,输入该BADI名称后,选择Interface,然后查看对应的接口实施样例代码(Example implementat ...
contentprovider基础
程序启动后,只要再manifest当中注册上,就会执行PersonProvider()创建一个对象
windows server 2008 + IIS 7.5实现多用户FTP（多账号对应不同目录
在windows server 2003 + IIS 6 的时候,就已经能实现多用户FTP的功能,不过设置有写繁琐,如果站点多的话,设置账号.权限这些东西都要搞很久.Windows server 20 ...
人生苦短之Python函数的健壮性
如何评论一个开发代码写的好?清晰简洁明了?No,No,一个处女座就可以写出来了,整齐地代码,详细的注释不是代码好的标准,应该说不是最重要的标准.代码写的是否健壮才是检验的重要标准. 代码的健壮性: 当 ...
ffmpeg xcode 中的使用
最近比较闲,苦于ios设备上没有直接播放torrent 文件的软件,开始折腾了.找了不少资料有了思路.但是其中用到了ffmpeg 这个东西. ffmpeg 是通用的一个视频解决框架,用C语言编写,通用 ...

使用Bootstrap实现表格列的显示与隐藏

使用Bootstrap实现表格列的显示与隐藏的更多相关文章

随机推荐

热门专题