使用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 MySQL函数
配置选项 MySQL 函数的行为受到 php.ini 中设置的影响. mysql.allow_persistent "1" 是否允许 MySQL 的持久连接. mysql.max_ ...
Spring Data MongoDB 四：基本文档改动（update）（一）
Spring Data MongoDB 三:基本文档查询(Query.BasicQuery)(一) 学习MongoDB 二:MongoDB加入.删除.改动一．简单介绍 Spring Data Mo ...
HTML5学习笔记简明版（9）：变化的元素和属性
改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow cont ...
javascript中提高代码的封装性
我出的面试题中,有一条是问如何避免页面引用JS,出现函数.变量重复.冲突的. 从大的方面讲,应该引入javascript的模块化开发,符合AMD规范之类: 从小的方面说,大概就是限定变量和函数的作用域 ...
[Phoenix] 八、动态列
摘要: 传统关系型数据库的动态列实现只能依赖逻辑层的设计实现,而Phoenix是HBase上的SQL层,借助HBase特性实现的动态列功能,具有高度的灵活性,告别业务逻辑层的复杂设计. 一.概要动态 ...
react面试宝典
调用 setState 之后发生了什么? 在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation).经过调和过程 ...
[IR课程笔记]统计语言模型
Basic idea 1.一个文档(document)只有一个主题(topic) 2.主题指的是这个主题下文档中词语是如何出现的 3.在某一主题下文档中经常出现的词语,这个词语在这个主题中也是经常出现 ...
UIBezierPath(转)
@import url(/css/cuteeditor.css); @import url(/css/cuteeditor.css); @import url(http://i.cnblogs.com ...
[zjoi]青蛙的约会_扩展欧几里德
两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝着对方那里跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有问清楚 ...
POJ2389 —— 高精度乘法
直接上代码了: #include<iostream> #include<cstdio> #include<cstring> #include<cstdlib& ...

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

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

随机推荐

热门专题