Second-level linkage based on bootstrap front-end page table

Show results

This common front-end requirement, how to achieve the above effect?

main code

1. In the html part, the front end uses the django template engine, but no matter what the frame is, it is the same.
   We add a line after each line of the table to set the style format display: none is not displayed by default. Use js to modify it to achieve dynamic display effect

		<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. The js code calls jquery and binds each "tr" tag, because each tr has a "plus sign". When the mouse clicks the plus sign, the js event is triggered, and then it determines the current state of the sublist and makes changes. By the way, the ajax code is attached. The list display should acquire data asynchronously. We'd better not fill all the data into the sublist while the page is loading, it will apply the efficiency

 $("#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();
            }
        });
         });

Show results