bootstrap table 实现父子表

最新推荐文章于 2025-06-25 09:09:56 发布

原创

最新推荐文章于 2025-06-25 09:09:56 发布 · 9.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap table

本文介绍了在项目中应用bootstrap table实现父子表的功能，并强调了后台返回数据必须为json数组的重要性。文中通过后台代码示例和效果图展示了实现过程。

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

在进行项目时，用到了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_departmentname">
                        </div&g