bootstrap-table--学习-----折叠效果

最新推荐文章于 2024-08-19 21:39:59 发布
最新推荐文章于 2024-08-19 21:39:59 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： bootstrap js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41607516/article/details/89884714
版权

折叠效果图如下

哈哈哈，代码如下：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap-table-expandable.css">
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table-expandable.js"></script>
</head>
<body>
    <div class="htmleaf-container">
        
        <div class="container">
            <div class="table-responsive">
                                <table style="word-break:break-all; word-wrap:break-all;" class="table table-hover table-expandable">
                                    <thead>
                                        <tr>
                                            <th>单号</th>
                                            <th>派送人</th>
                                            <th>收货人</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody role="alert" aria-live="polite" aria-relevant="all">
                                         <tr class="even">
                                                <td class="">62345678</td>
                                                <td class="">1111</td>
                                                <td class="">1111</td>
                                                <td class="">详情</td>
                                          </tr>
                                          <tr>
                                                <td colspan="5">
                                                   哈哈哈哈测试与
                                                 </td>                                          
                                           </tr>
                                           <tr class="even">
                                                <td class="">201203814</td>
                                                <td class="">2222</td>
                                                <td class="">2222</td>
                                                <td class="">详情</td>
                                            </tr>
                                            <tr>
                                                <td colspan="5">
                                                      <div class="tabbable">
                                                        <ul class="nav nav-tabs" id="myTab">
                                                            <li class="active"><a data-toggle="tab"
                                                                href="#home"> 
                                                                <i class="green icon-home bigger-110"></i> 发货单信息
                                                            </a></li>
                                                            <li><a data-toggle="tab"
                                                                href="#records">
                                                                    <i class="green icon-comment bigger-110"></i> 商品详情
                                                            </a></li>
                                                        </ul>
                                                        <div class="tab-content">
                                            
                                                        </div>
                                                    </div>
                                                     <div id="home" class="tab-pane in active">
                                                                <div class="profile-user-info profile-user-info-striped">
                                                                
                                                                    <div class="profile-info-row"
                                                                        style="display: -webkit-box;height: 35px;">
                                                                        <div class="profile-info-name">
                                                                            <span>单号：</span>
                                                                        </div>
                                                                        <div class="profile-info-value" style="width:20%">
                                                                            <span class="editable"> &nbsp;
                                                                                hhhhh</span>
                                                                        </div>
                                                                        
                                                                    </div>
                                                                </div>
                                                                <div class="hr dotted"></div>
                                                                </br>
                                                               </div>
                                                       </div>    
                                                      
                                                    </div>
                                                 </td>                                          

                                            </tr>
                                   </tbody>
                                 </table>

              </div>
        </div>
    </div>
</body>
</html>

huofeige
关注
专栏目录
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
bootstrap-table 常用总结-树形结构（展开和折叠）
程先生的博客
10-16 699
　　今天在工作的时候，遇到了一个需求，就是需要一键展开或者关闭树形结构。关于树形结构的不是很熟悉，然后去百度，结果也不是很准确。最后经过Google才找到。下面分享给大家 直接看代码： 1 var flag = true;//开启还是关闭的标志位 2 function change_tree(target){ 3 if(flag){...
Bootstrap 折叠（Collapse）插件
最新发布
lwx666sl的博客
08-19 1280
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
Bootstrap框架----DataTables列表折叠列
热门推荐
直到世界的尽头
01-31 2万+
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架——DataTables列表示例 本章学习行详细内容的展开与折叠，当数据量多时，可以通过点击按钮后再去请求获取数据进行展示。 官网例子参考 行详细内容的展开与折叠 http://datatables.club/example/user_share/row_details.h...
bootstrap table 收缩_Bootstrap-Table展开/折叠表示例开始折叠
weixin_28808633的博客
01-26 2982
我正在实施一个表展开/折叠组，并且它正在工作，但我无法弄清楚如何启动折叠组。Bootstrap-Table展开/折叠表示例开始折叠如果单击标题，该图像中的蓝色行，坍塌下的行。 我怎样才能改变它，以便这些组默认处于折叠状态？编辑：包括代码。我正在使用的页面使用了大量的引导程序和JavaScript，但以下是相关部分。HTML：data-row-style="rowStyle"id="layer-li...
BootstrapTable之四舍五入处理数据、列的折叠或显示
qzz12345的博客
05-06 1047
BootstrapTable之四舍五入处理数据、列的折叠或显示 前言 随着工作和学习的积累，又学会了关于BootstrapTable的两个实用小功能，在此记录一下。 一、四舍五入处理数据 1、四舍五入处理数据和前面的添加千分位分隔符实现方式一样，只需将要处理的数据用Math.round()处理一下即可，具体代码如下： //显示千分位分隔符 function showSeparator(value) { if (value == undefined)
零基础Bootstrap入门教程(24)--折叠插件
程序员大阳
03-11 1096
本文目录1. 概述2. 通过``元素控制折叠3. 通过JS控制折叠4. 小结 1. 概述 折叠的意义是当内容需要是，则显示在界面上，而内容不需要时，就是折叠收藏起来。 Bootstrap对折叠的实现非常简单，我们本篇就来演示一番。 2. 通过<a>元素控制折叠 先看一段代码： <a type="button" class="btn btn-primary" data-toggle="collapse" href="#section1">显示春晓文字</a>
Bootstrap折叠组，列表组，轮播使用与简单组合布局
qq_62898618的博客
05-04 742
Bootrap折叠组与列表组实现一个简单收缩列表 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <script src="js/jquery-3.6.0.js" typ
bootstrap-table官网最新版
10-02
Bootstrap Table是一款基于Bootstrap框架的开源JavaScript插件，用于创建功能丰富的、响应式的表格。...通过学习和实践，我们可以充分利用Bootstrap Table的强大功能，打造功能丰富、用户体验良好的数据展示界面。
bootstrap-table+treegrid实现树形表格
10-16
ue":"open:system:manage"},{"id":3,"pid":1,"status":1,"name":"用户添加","permissionValue":"open:user:add"},{"id... $(function() { $table.bootstrapTable({ data: data, columns: [{ field: 'state', checkbox:
bootstraptable-treeview树形，树形空格缩进bug已解决
09-14
BootstrapTable 是一个基于 Bootstrap 框架的前端数据展示插件，它提供了丰富的功能，如分页、排序、过滤和自定义操作等。在本文中，我们将深入探讨 "bootstraptable-treeview"，这是一个用于在 BootstrapTable 中...
Bootstrap4 折叠
12-13
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 折叠 Lorem ipsum dolor text.... 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ); 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示，需要在 或 元素上添加 data-toggle=”collapse” 属性。 data-target=”#id” 属性是对应折叠的内容 ( )。 注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 Collapsible Lorem ipsum dolo
基于Bootstrap的可展开表格行的jQuery表格插件
12-11
bootstrap-table-expandable是一款非常实用的基于Bootstrap的可展开表格行的jQuery表格插件。该表格插件通过设置可以使每一行都具有展开和收缩的功能，行展开时可以显示额外的信息。而且该插件使用非常简单。
Bootstrap展开收缩显示表格json格式数据.zip
05-23
Bootstrap展开收缩显示表格json格式数据基于Bootstrap3.3.5制作，自适应分辨率，JS函数调用json，动态获取表格数据，双击表格行可折叠关闭表格数据显示。
使用bootstrap-table-treegrid实现树表
qq_38754855的博客
01-14 1245
使用bootstrap-table-treegrid实现树表 需要引入资如下： bootstrap.min.css；bootstrap-table.min.css；jquery.treegrid.css jquery.js；bootstrap-table.min.js；bootstrap-table-treegrid.js； jquery.treegrid.min.js 具体实现如下： js： $('#tb_departments').bootstrapTable({ url: "/getD
bootstrap实现多行折叠
路人甲的博客
05-11 4302
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http
Bootstrap-折叠方法
JHON_03的博客
09-30 580
"font-size:18px;">            Bootstrap折叠（Collapse）插件方法      "http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">      "http://libs.baidu.com/jquery/2.0.0/jquery.min.js
Bootstrap5 折叠
shengyin714959的博客
08-22 545
Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。和是用于定义组件行为和目标元素的自定义数据属性。"collapse""modal""tab"以下实例中，当按钮被点击时，data-bs-toggle="collapse" 属性触发了折叠菜单的行为，data-bs-target="#demo" 属性指定了折叠菜单的目标元素为 ID 为 demo 的 元素。
Bootstrap(折叠+列表组&轮播图实现&图文区)
qq_64001795的博客
05-08 509
书籍列表 <div class="col-md-3 aa" style="background-color: #8FD19E; "> <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn
bootstrap-table-treegrid 怎么用
06-01
Bootstrap Table Treegrid 是基于 Bootstrap Table 的扩展插件，用于在表格中显示树形结构数据。下面是使用 Bootstrap Table Treegrid 的步骤： 1. 引入必要的文件 ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table-treegrid/1.11.0/bootstrap-table-treegrid.min.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap-table-treegrid/1.11.0/bootstrap-table-treegrid.min.js"></script> ``` 2. 在 HTML 页面中添加表格元素，并设置 data-url 属性为数据源的 URL。例如： ``` <table id="treegrid" data-url="data.json"></table> ``` 3. 在 JavaScript 中初始化表格，启用 Treegrid 插件。例如： ``` $('#treegrid').bootstrapTable({ columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '名称' }, { field: 'parentId', title: '父级ID' }], treeShowField: 'name', // 指定树形结构显示的字段 parentIdField: 'parentId', // 指定父级ID字段 idField: 'id', // 指定ID字段 treeCollapse: false, // 是否默认折叠树形结构 treeGrid: true, // 启用 Treegrid 插件 expandIcon: 'glyphicon glyphicon-plus', // 展开图标 collapseIcon: 'glyphicon glyphicon-minus' // 折叠图标 }); ``` 4. 数据源的格式需要满足以下要求： * 每个节点需要有一个 ID 字段和一个父级 ID 字段。 * 根节点的父级 ID 字段可以为空。 * 节点之间的层级关系可以通过父级 ID 字段来确定。 以上就是使用 Bootstrap Table Treegrid 的基本步骤，您可以根据实际情况调整参数和数据源格式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值