bootstrap table 实现父子表

最新推荐文章于 2024-05-22 15:04:30 发布
最新推荐文章于 2024-05-22 15:04:30 发布
阅读量9k 收藏 10
点赞数 1
分类专栏： bootstrap 文章标签： bootstrap table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39847344/article/details/84969042
版权
本文介绍了在项目中应用bootstrap table实现父子表的功能，并强调了后台返回数据必须为json数组的重要性。文中通过后台代码示例和效果图展示了实现过程。
摘要由CSDN通过智能技术生成

 

在进行项目时，用到了bootstrap table的父子表，现在记录下使用过程中遇到的坑。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootStrap Table使用</title>
    <!-- 1、Jquery组件引用 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <!-- 2、bootstrap组件引用 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
   <!--  3、bootstrap table组件以及中文包的引用 -->
    <script src="js/bootstrap-table.js"></script>
    <link href="css/bootstrap-table.css" rel="stylesheet" />
    <script src="js/bootstrap-table-zh-CN.js"></script>
    
    <!-- 导出 -->
	<script src="js/bootstrap-table-export.min.js"></script>
	<script src="js/tableExport.js"></script>
</head>
<body>
	    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_department
最低0.47元/天 解锁文章
Rm-r
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
bootstrapr表格父子框_bootstrap-table父子表样式问题
weixin_39656853的博客
12-18 536
bootstrap-table父子表 .我想通过控制右边的操作来控制子表的显示，功能是实现了，但是右边还是会多一个加减好，这是上面自带的父子表的按钮。我的需求是通过右边的操作来控制，左边的按钮让他消失截图如下代码如下$(function(){//表格var TableInit = function () {var oTableInit = new Object();oTableInit.Init ...
Bootstraptable建立父子表
04-13
Bootstraptable建立父子表 detailView: true 的折叠使用
bootstrap 操作 父子表,bootstrap-table 父子表入门篇
weixin_31569663的博客
03-18 1407
/*用window.onload调用myfun()*/window.onload=myfun;functionmyfun() {$("#report").bootstrapTable({url:'/dashboard',//父表加载数据用到的urlmethod:'get',detailView:true,//父子表，为true会在父数据前添加 “+”//sidePagination: "serve...
vue3 el-table表格修改 父子组件传值一起变化问题
最新发布
m0_58697892的博客
05-22 197
到这里就可以完全实现了 子组件编辑的时候 父组件里面的数据不需要改变。vue3 中父组件把值传入子组件 子组件修改父组件同步修改问题。
bootstrap table组件实现父子表【菜单管理】
ccyy
04-09 1556
实现的效果： 前端代码： <!DOCTYPE HTML> <html lang="zh-cn" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
weixin_34323858的博客
11-25 793
前言：上篇 JS组件系列——表格组件神器：bootstrap table 简单介绍了下Bootstrap Table的基础用法，没想到讨论还挺热烈的。有园友在评论中提到了父子表的用法，今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。 bootstrap table系列： JS组件系列——表格组件神器：bootstrap table JS组件系...
BootstrapTable父子表
clearlovel的博客
09-26 970
3-2、在要增加了一个新表的时候，直接清空表的数据，添加新数据就使用sppend就行了，清空数据使用removeAll方法。对比使用create方法的话，removeAll比create方法性能优化方面强很多，不建议使用create方法创建表。这两行代码不能少，这样就在父表下创建了子表，子表的数据就是row，index，$detail，对应着子表可以去取数据。1-2、在父表的每一行的最前面显示一个加号，点开就是子表信息。2-3、css部分可以自己随意发挥。
bootstrapTable父子表
qq_37514029的博客
05-06 1521
创建父表 $('#atptable').bootstrapTable({ url: '/Pm/statistics_finance/get_confirm_income?station_id=' + station_id, //请求后台的URL（*） method: 'get', //请求...
完美解决bootstraptable父子表子表渲染问题
11-29
"完美解决bootstraptable父子表子表渲染问题"的标题表明我们将探讨如何处理子表无法正确渲染或调用初始化方法的常见问题。 首先，让我们理解父子表的基本概念。在BootstrapTable中，父子表通常通过点击父表格的某一...
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
10-22
首先，我们来看父子表的实现。在Bootstrap Table中，通过设置`detailView`属性为`true`，可以在每一行前添加一个展开图标。当用户点击这个图标时，会触发加载子表格的事件。实现这一功能的关键在于`onExpandRow`事件...
bootstrapTable使用示例.rar
04-14
本示例压缩包包含了一系列关于BootstrapTable的使用示例，包括父子表、treegrid（树形表格）以及与KnockoutJS的集成，这些都是在实际开发中非常实用的场景。 1. **BootstrapTable基本使用** BootstrapTable的核心...
Bootstrap table表格初始化表格数据的方法
10-18
$('#table').bootstrapTable({ url: '/B_Product/GetProductData', // 后端数据源URL method: 'get', // 请求方式，可选get或post toolbar: '#toolbar', // 工具栏容器 striped: true, // 是否显示斑马线效果 ...
BootstrapTable 父子表案例
qq_41040871的博客
12-08 746
Bootstrap Table 父子表案例
bootstrap-table父子表
mwp5212的博客
11-21 5666
function initTable() { $('#prjLogBookProblemParentTable').bootstrapTable('destroy').bootstrapTable({ columns : [ {
Bootstrap Table 父子表应用 (detaileView 二级表格)
weixin_43959963的博客
01-06 2296
必要属性 : detailView: true, detailFormatter: function (index, row) { var html = []; $.each(row, function (key, value) { html.push('<p><b>' + key + ':</b> ' + value + '</p>'); }) }, icons: { detailOpen: 'glyphico
bootstrapTable的父子配置
weixin_43328357的博客
07-03 738
1.父子表
bootstrap-Table sub父子表的使用
热门推荐
bubble21的博客
12-22 2万+
今天项目里面要用到bootstrapTable里面的Sub Table也就是我们说的父子表，之前也没做过，so直接到官网找文档，卡的不行，算了只能网上百度找了几篇案例，也都是不全面。搞了一下午，终于有点效果。今天记录一下，加深印象，也给像我一样寻找案例的朋友一点思路。–环境：springboot+freemarker（jsp也是一样做法）先看一下官网的效果图http://issues.wenzhix
bootstrapr表格父子框_bootstrap-table 父子表入门篇
06-08
Bootstrap-table 是一款基于Bootstrap的jQuery表格插件，可以实现表格的各种功能，例如排序、搜索、分页等。而Bootstrap-table也提供了父子表功能，可以方便地实现表格的嵌套展示。下面是父子表的入门教程。 首先，我们需要准备一个包含父子关系的数据源。例如： ``` var data = [ { id: 1, name: 'Parent 1', children: [ { id: 2, name: 'Child 1-1' }, { id: 3, name: 'Child 1-2' } ] }, { id: 4, name: 'Parent 2', children: [ { id: 5, name: 'Child 2-1' } ] } ]; ``` 其中，每个父节点都有一个children属性，代表它的子节点。接着，我们需要在表格中配置父子表的相关参数。例如： ``` <table data-toggle="table" data-url="data.json" data-detail-view="true" data-detail-formatter="detailFormatter"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> </tr> </thead> </table> <script> function detailFormatter(index, row) { var html = []; $.each(row.children, function (key, child) { html.push('<p>' + child.name + '</p>'); }); return html.join(''); } </script> ``` 在上述代码中，我们配置了data-detail-view和data-detail-formatter参数，分别表示开启父子表功能和定义子表的展示方式。而在detailFormatter函数中，我们将子节点的名称拼接成了一段HTML字符串，并返回给父表格的插件。 最后，我们需要引入Bootstrap-table的相关文件，并初始化表格： ``` <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <script> $(function () { $('table').bootstrapTable({ data: data }); }); </script> ``` 这样，我们就成功地实现了一个父子表的展示效果。当我们点击父表格的某一行时，就会展示出它所对应的子表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rm-r

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值