JQuery - Как показать строки, которые скрыты при нажатии кнопки

Question

У меня есть таблица с данными иерархии (иерархия родителей родителей). Пользователь кнопки на клике может скрыть или показать все связанные дочерние элементы этого конкретного родителя.

Я сделал это, но я делаю вызов ajax, чтобы связать родителя с родителем, который просто рухнул, нажав кнопку.

Есть несколько ситуаций. Меня не волнует Первый Я сделал это.

1) When only root node is shown: Затем я должен сделать вызов ajax, чтобы связать ребенка с этим корневым узлом и далее.

2) But when all hierarchy list is displayed: Затем пользователь может свернуть всех детей, нажав кнопку родительского узла, но когда пользователь нажимает на эту кнопку одновременно, я не хочу делать вызов ajax, потому что у меня есть эти дочерние или строки, или я могу сохранить переменным или каким-либо другим способом.

function getChildern(primaryId, isFlat, col) { 
var id = event.target.id 
var allChildern = null 
if(!$(".id_"+event.target.id).hasClass('minus-symbol')){ 


    /* 
    Note : here I want to check whether it's collapsed or it's a new thing 
    if It's new make ajax request else build jquery code to show childs related to this parent which are just collapsed. 
    */ 


    $(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol') 
    $.ajax({ 
     url : ("/getChildsDataRows"), 
     type : "POST", 
     data : { 
      primaryId : primaryId 
     }, 
     success : function(result) { 
      var substr = result.data 
      $.each(substr , function(i, val) { 
       // $(".id_"+id).show(); 
       var suprSubstr = substr [i]; 
       var tr = '<tr>' ; 
       $.each(suprSubstr , function(i, val) { 
        tr += '<td>' + suprSubstr[i] + '</td>'; 
       }); 
       tr += '</tr>' 
       $('table tr:nth-child(' + rowNumber + ')').after(tr); 
       //$(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol') 
      }); 
     } 
    }); 
}else{ 
    $(".id_"+event.target.id).addClass('plus-symbol').removeClass('minus-symbol') 
    allChildern = $(".parent_"+id).map(function() { 
     $("#"+this.id).closest("tr").hide(); 
     return this.id 
    }).get(); 

    if(allChildern == ''){ 
    }else{ 
     removeChildern(allChildern) 
    } 

    function removeChildern(allChildern){ 
     //alert(allChildern) 
     $.each(allChildern , function(i, val) { 
      $(".id_"+allChildern[i]).addClass('plus-symbol').removeClass('minus-symbol') 
      var allSubChildern = null 
      allSubChildern = $(".parent_"+allChildern[i]).map(function() { 
       $("#"+this.id).closest("tr").hide(); 
       return this.id 
      }).get(); 

      if(allSubChildern.length == 0){ 

      }else{ 
       removeChildern(allSubChildern) 
      }//$("#"+allChildern[i]).closest("tr").hide(); 
     }); 

    } 
    } 
} 
} 

Вот DOM Структура

<a onclick="getChildern('1','false','UniqueId')" title="View"><i class="minus-symbol id_1 parent_0" style="height:10px;margin-left:1px;" id="1"> </i></a> 

Answer 1

allChildern = $(".parent_"+id).map(function() { 
$("#"+this.id).closest("tr").show(); 
return this.id 
}).get(); 

if(allChildern == ''){ 
    // make ajax call 

}else{ 
showChildern(allChildern) 
clickable=true 
} 

function showChildern(allChildern){ 
//alert(allChildern) 
$.each(allChildern , function(i, val) { 
    $(".id_"+allChildern[i]).addClass('plus-symbol').removeClass('minus-symbol') 
    var allSubChildern = null 
    allSubChildern = $(".parent_"+allChildern[i]).map(function() { 
     $("#"+this.id).closest("tr").show(); 
     return this.id 
    }).get(); 

    if(allSubChildern.length == 0){ 

    }else{ 
     showChildern(allSubChildern) 
    }//$("#"+allChildern[i]).closest("tr").show(); 
    }); 

    } 

Answer 2

Согласно нашей дискуссии, я обновление кода.

if($("#data-grid-table-tree tbody tr").length > 0){ 
    // children already exist. no need for ajax call, just show the children 
}else{ 
    // children doesnt exists. make a call. 
}