基于bootstrap前端页面表格二级联动

效果展示

这种常见的前端需求，如何实现上面的效果呢？

主要代码

1. html 部分，前端用的是django模板引擎，但是不管什么框架都一样的
   我们给表格的每一行的后面增加一行 设置style格式display：none默认不展示。用js去修改他达到动态展示效果

		<tr class="detail-view" style="display: none">
                 <td colspan="6" id="{{ group.id }}">
                     <ol class="panel-default"></ol>
                 </td>
         </tr>

<table class="table">
              <thead>
            <tr>
                <th  style="text-align: center">集群名字</th>
                <th  style="text-align: center">集群类型</th>
                <th  style="text-align: center">sure应用名</th>
                <th  style="text-align: center">切换方式</th>
                <th  style="text-align: center">备份策略</th>
                <th  style="text-align: center">备注信息</th>
                <th  style="text-align: center"></th>
            </tr>
              </thead>
             <tbody id="dataBody">
                     {% for group in serverGroups %}
                <tr id="{{ group.id }}">
                  <td  style="text-align: center"><a rel="#">{{ group.group_name }}</a></td>
                  <td  style="text-align: center">{% ifequal group.group_type '0' %}公共{% endifequal %}{% ifequal group.group_type '1'%}私有{% endifequal %}{% ifequal group.group_type '2'%}其它{% endifequal %}</td>
                  <td  style="text-align: center">{{ group.sure_name }}</td>
                  <td  style="text-align: center">{{ group.switch_style  }}</td>
                  <td  style="text-align: center">{{ group.backup_style }}</td>
                  <td  style="text-align: center">{{ group.remark }}</td>
                  <td  style="text-align: center"><a href="#" class="sftpNode" ><i class="glyphicon glyphicon-plus icon-plus"></i></a></td>
               </tr>
                 <tr class="detail-view" style="display: none">
                 <td colspan="6" id="{{ group.id }}">
                     <ol class="panel-default"></ol>
                 </td>
                 </tr>
            {% endfor %}
             </tbody>
            </table>

3. js代码 调用jquery，绑定每一个 “tr” 标签，因为每一个tr都有一个 “加号” 当鼠标点击加号 触发js事件，然后去判断子列表现在的状态并作出更改。顺便附上ajax代码。列表展示应该是异步去获取数据的，我们最好不要在页面加载的同时将所有数据填充到子列表，会应用效率

 $("#dataBody").find("tr").each(function(){
        var that = this;
        var groupId = $(that).attr("id");
        $(this).find("> td > .sftpNode").on("click", function(){
            if($(that).next().is(":hidden")){
                $(this).find(".glyphicon").toggleClass("glyphicon-minus icon-minus");
                $(that).next().show();
                    $.ajax({
                    url: "/server/list",
                    data: {'id':parseInt(groupId),csrfmiddlewaretoken:'{{ csrf_token }}'},
                    type: 'GET',
                    dataType: "json",
                    success:function (data) {
                        serverList = data["serverList"]
                        $('#dataBody').find(".detail-view").find("#"+groupId).find("ol").find("li").remove()
                        for (j in serverList){
                            var p = "<li><p>&emsp;&emsp;&emsp;"+serverList[j]["relation"]+"&nbsp;&nbsp;&nbsp;&nbsp;ip: "+serverList[j]["ip"]+"&nbsp;&nbsp;&nbsp;&nbsp vip: "+serverList[j]["vip"]+"&nbsp;&nbsp;&nbsp;&nbsp owner: "
                                +serverList[j]["owner"]+"&nbsp;&nbsp;&nbsp;&nbsp; status: "+serverList[j]["status"]+"&nbsp;&nbsp;&nbsp;&nbsp sftpUserCount: "+serverList[j]["sftpUserCount"]+"</p></li>";
                            $('#dataBody').find(".detail-view").find("#"+groupId).find("ol").append(p)
                        }
                    },
                    error:function(error){
                        console.log(error)
                    }
                })
            } else {
                $(this).find(".glyphicon").toggleClass("glyphicon-minus icon-minus");
                $(that).next().hide();
            }
        });
         });

效果展示