Jquery-如何显示按钮单击时隐藏的行

Jquery - How to show the rows which are hidden on button click

本文关键字：单击 隐藏 按钮 何显示 显示 Jquery-      更新时间：2023-09-26

我有一个表，它有层次结构数据（父子层次结构）。点击该按钮，用户可以隐藏或显示该特定父级的所有相关子级。

我已经这样做了，但我正在进行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>

根据我们的讨论，我正在更新代码。

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.
}

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();
   });
  }
相关文章：