Bootstrap table

最新推荐文章于 2025-08-08 12:35:56 发布
最新推荐文章于 2025-08-08 12:35:56 发布
阅读量539 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： json javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Samuelxiaopeng/article/details/84915788
本文介绍了一个使用 Bootstrap Table 插件实现表格行展开和收起功能的例子。通过两个按钮控制表格指定行的展开与收起状态，并展示了如何通过 JavaScript 实现这一功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>expandRow-collapseRow</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="../assets/examples.css">
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>expandRow-collapseRow</h1>
<p></p>
<div id="toolbar">
<button id="button" class="btn btn-default">expandRow</button>
<button id="button2" class="btn btn-default">collapseRow</button>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-height="460"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table'),
$button = $('#button'),
$button2 = $('#button2');

$(function () {
$button.click(function () {
$table.bootstrapTable('expandRow', 1);
});
$button2.click(function () {
$table.bootstrapTable('collapseRow', 1);
});
});

function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}
</script>
</body>
</html>
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
08-29
主要为大家详细介绍了bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap table 收缩_bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
weixin_27061475的博客
01-26 563
本文实例为大家分享了bootstrap table展开或关闭当前行数据的具体代码，供大家参考，具体内容如下expandRow-collapseRowexpandRow-collapseRowexpandRowcollapseRowdata-toggle="table"data-toolbar="#toolbar"data-height="460"data-detail-view...
bootstrap table 收缩_bootstrap-table方法之：expandRow-collapseRow，展开或关闭当前行数据...
weixin_30663789的博客
01-17 720
expandRow-collapseRowexpandRow-collapseRowexpandRowcollapseRowdata-toggle="table"data-toolbar="#toolbar"data-height="460"data-detail-view="true"data-detail-formatter="detailFormatter"data-url="../json...
bootstrap table使用总结
weixin_43704154的博客
05-21 2784
使用服务器端处理时，bootstrap-table的默认操作模式是简单地丢弃表中当前存在的任何数据，并向服务器发出请求以获取要显示的第一页数据。因此，您可以使用data-defer-url而不是data-url来指示bootstrap-table不发出初始请求，而是使用页面上已有的数据。依赖：tablednd v0.9，如果你想要你可以包含bootstrap-table-reorder-rows.css文件来使用默认的。1，$ 100，$ 2，$ 20而不是$ 1，$ 2，$ 20，$ 100。
bootstrapTable 嵌入 echart
u010462259的博客
03-10 1190
formatter 函数创建了一个包含 echarts-container 类的 div 元素作为图表的容器，并且初始化了 ECharts 实例，设置了相应的配置项，并将数据传递给了图表。下面是一个具体的例子，展示了如何在 Bootstrap Table 的某个单元格中嵌入一个简单的 ECharts 柱状图。首先，确保你的 HTML 文件中包含了 Bootstrap、Bootstrap Table 和 ECharts 的相关依赖。// 初始化 Bootstrap Table。// 设置图表配置项。
bootstrapTable实现表格内数据的添加、删除、修改、查询
09-11
BootstrapTable是一个基于Bootstrap的jQuery表格插件，它提供了一种便捷的方式来展示和操作数据。通过使用BootstrapTable，开发者能够轻松实现表格数据的增、删、改、查（CRUD）功能，而无需从零开始编写大量的前端...
bootstraptable冻结列例子.doc
01-14
$('#table').bootstrapTable({ columns: [ // 定义表格列 { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, // 更多列... ], data: [ // 表格数据 { ...
Bootstrap table使用方法记录
08-29
$('#table').bootstrapTable({ columns: [{ field: 'id', title: '编号' }, { field: 'name', title: '名称' }, { field: 'tecParam', title: '技术参数' }], data: [{ id: 1, name: 'Product 1', ...
bootstrapTable使用示例.rar
04-14
BootstrapTable是一款基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能和自定义选项，能够帮助开发者轻松地创建美观、响应式的表格。本示例压缩包包含了一系列关于BootstrapTable的使用示例，包括父子表、...
bootstrap table sum总数量统计实现方法
08-29
$('#myTable').bootstrapTable({ columns: [/* 列定义 */], data: [] }); ``` 总结： 通过以上步骤，我们可以成功地在 Bootstrap Table 中实现总数量统计功能。在实际应用中，可能需要根据具体的需求和数据...
$.each(selectData, function(key, value){ }
qq_39822451的博客
04-01 650
function initSelectX(){ selectNum = 0; var html = []; $.each(selectData, function(key, value){ selectNum ++; html.push('<span class="tag" id="'+key+'_tags-input"><span>'+value...
bootstrap table组件实现点击行 在行下面展示数据列表
做你的时光机的博客
04-02 7234
工作遇到这个样一个需求类似于下面，当我点击2这一行的加号时，在当前行之后添加详细数据列表 但是 这个数据我个人当时考虑的时候首先考虑做成tree 但是奈何个人技术不行 用不了bootstrap table的树组件，无法定义这个数据的PID以及CID，这里的子列表是子ID中是否包含父ID来查找的，所以当时就没有用tree来解决 后来找到bootstrap table 的官网...
json 特性 -- justctf 2025 Ticket Master
weixin_59166557的博客
08-08 163
'section''''seat'首先其需求一个json我们没有key,所以唯一合法的票证是传递空票接下来程序利用这些数据生成图形化票证type。
MySQL vs PostgreSQL 深度对比：为你的新项目选择正确的开源数据库 (2025)
最新发布
Clownseven的博客
08-08 694
在MySQL和PostgreSQL之间纠结？这不仅仅是速度之争。本文从设计哲学、性能特点、高级功能（如JSONB）和数据一致性等多个维度，深度剖析两大开源数据库的本质区别。通过场景化建议，帮你为Web应用、数据分析或新项目，做出最合适的数据库技术选型。
1Panel Agent 证书绕过实现远程命令执行漏洞复现（CVE-2025-54424）
iSee857的博客
08-08 190
1Panel Agent存在证书验证绕过导致的远程命令执行（RCE）漏洞。该漏洞影响1Panel v2版本引入的Core-Agent架构，双方通过HTTPS进行通信时使用tls.RequireAnyClientCert进行证书校验，仅检查证书的CN字段为panel_client，未对证书签发机构进行验证。攻击者可通过伪造合法格式的客户端证书绕过身份认证，进而访问多个高权限WebSocket接口，实现敏感信息获取与远程命令执行。（CVE-2025-54424）
1688 商品详情接口开发实战：从平台特性到高可用实现
QQ569893796的博客
08-07 742
本文详细解析1688平台商品详情接口的技术实现，重点剖析其B2B特性。文章首先对比1688与C端电商平台的差异，突出其批发属性、供应商信息等核心数据模型。随后从开发环境准备、签名生成、接口封装到数据解析，提供完整代码示例，特别针对阶梯价格、最小起订量等B2B特性设计专用解析方法。同时介绍了接口优化策略，包括缓存机制、重试策略及供应商筛选工具，最后强调了合规调用规范。该接口适用于采购管理、供应商评估等B2B场景，为开发者构建批发业务系统提供技术指导。
MyBatis-Plus中JSON字段处理的常见问题与解决方案
Vic10101的博客
08-08 232
当我们使用自定义Mapper方法时，MyBatis会严格按照XML中定义的SQL和映射规则执行操作，包括使用指定的typeHandler处理JSON字段。-- 其他字段映射... --></insert>通过以上配置，我们就可以正常使用MyBatis-Plus的内置方法来处理包含JSON字段的实体对象了。这个问题的核心在于MyBatis-Plus的自动SQL生成机制与自定义类型处理器之间的兼容性问题。
Bootstrap Table
08-01
在 Django 项目中实现 Bootstrap Table 的冻结列功能，主要依赖于前端模板中对 Bootstrap Table 插件的配置，以及对静态资源的正确引入。Django 作为基于 Python 的 Web 框架，其核心组件包括对象关系映射、URL 设计、模板语言等，使得开发者能够高效构建数据库驱动的 Web 应用程序[^1]。 为了实现冻结列功能，首先需要在 Django 模板中引入 Bootstrap 和 Bootstrap Table 的相关资源文件。这些资源可以通过 CDN 快速引入，确保在前端页面中加载必要的 CSS 和 JS 文件，从而支持 Bootstrap Table 的功能扩展。例如： ```html <!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <!-- 引入 Bootstrap Table CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.21.2/dist/bootstrap-table.min.css"> <!-- 引入 jQuery --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <!-- 引入 Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- 引入 Bootstrap Table JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script> ``` 在 HTML 模板中定义一个 `<table>` 元素，并通过设置 `data-fixed-columns="true"` 和 `data-fixed-number="3"` 来启用冻结前三列的功能。这样可以确保用户在水平滚动表格时，指定的列始终保持在视图左侧，不会随其他列一起滚动。 ```html <table id="table" data-toggle="table" data-url="/api/data/" <!-- 指向你的数据接口 --> data-pagination="true" data-side-pagination="server" data-fixed-columns="true" data-fixed-number="3" class="table table-bordered table-striped" > <thead> <tr> <th data-field="id">ID</th> <th data-field="name">姓名</th> <th data-field="age">年龄</th> <th data-field="address">地址</th> <th data-field="email">邮箱</th> </tr> </thead> </table> ``` 后端方面，Django 需要提供一个返回表格数据的 API 接口。可以使用 Django REST Framework 快速构建数据接口，以支持 Bootstrap Table 的分页、排序等特性。 ```python from rest_framework.decorators import api_view from rest_framework.response import Response from .models import Person from .serializers import PersonSerializer @api_view(['GET']) def get_table_data(request): page = int(request.GET.get('offset', 0)) limit = int(request.GET.get('limit', 10)) queryset = Person.objects.all()[page:page + limit] serializer = PersonSerializer(queryset, many=True) return Response({ 'total': Person.objects.count(), 'rows': serializer.data }) ``` 同时，在 `urls.py` 中配置对应的 URL 路由： ```python from django.urls import path from .views import get_table_data urlpatterns = [ path('api/data/', get_table_data, name='get_table_data'), ] ``` 在使用过程中需要注意以下几点： - **高度限制问题**：如果设置了表格的 `height` 属性，可能会导致冻结列功能异常，因此建议避免设置 `height` 参数。 - **响应式布局**：若需要支持移动端或响应式设计，可以结合 Bootstrap 的响应式表格类 `.table-responsive` 来实现更好的兼容性。 - **浏览器兼容性**：Bootstrap Table 的冻结列功能在现代浏览器中表现良好，但在 Internet Explorer 中可能存在兼容性问题，建议测试并根据需要进行适配。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值