Question

我通过一个id为参数的Ajax调用在引导表中加载行详细信息此详细信息显示在使用字形图标按钮的可折叠行中。

然而，单击按钮以折叠行最终会使显示失真虽然代码似乎是正确的，但我一直在努力寻找解决办法你可以找到jsFiddle here

＆＃13;

var parentsData = {
  "success": true,
  "parents": [{
    "id": 1531,
    "Firstname": "Austin",
    "Surname": "Ana\u00eblle",
    "schoolId": "046039",
    "schoolName": "ARCAMBAL",
    "commune": "ARCAMBAL"
  }, {
    "id": 2032,
    "Firstname": "Ramos",
    "Surname": "L\u00e8i",
    "schoolId": "046043",
    "schoolName": "J CALVET",
    "commune": "CAHORS"
  }, {
    "id": 3036,
    "Firstname": "Baker",
    "Surname": "Salom\u00e9",
    "schoolId": "046043",
    "schoolName": "Z LAFAGE",
    "commune": "CAHORS"
  }, {
    "id": 1724,
    "Firstname": "Berry",
    "Surname": "Marl\u00e8ne",
    "schoolId": "046044",
    "schoolName": "J CALVET",
    "commune": "CAHORS"
  }]
};

var $table = $('.js-table');
$table.find('.js-view-parents').on('click', function(e) {
  e.preventDefault();
  if (!$(this).closest('tr').next('tr').hasClass('expand-child')) {

    $(e.target).toggleClass('glyphicon-eye-close glyphicon-eye-open');

    $(".expand-child").slideUp();
    var $this = $(this).closest('tr');
    var rowId = $(this).data('id');

    var newRow = '<tr class="expand-child">' + '<td colspan="12" id="collapse' + rowId +
      '">' +
      '<table class="table table-condensed table-bordered" width=100% >' +
      '<thead>' +
      '<tr>' +
      '<th>Surname</th>' +
      '<th >FirstName</th>' +
      '<th >School Id</th>' +
      '<th >School name</th>' +
      '</tr>' +
      '</thead>' +
      '<tbody>';

    $.ajax({
      url: '/echo/json/',
      dataType: "json",
      data: parentsData,
      success: function(parentsData) {
        if (parentsData.parents) {
          var parents = parentsData.parents;
          $.each(parents, function(i, parent) {
            newRow = newRow + '<tr scope="row">' +
              '<td>' + parent.Firstname + '</td>' +
              '<td>' + parent.Surname + '</td>' +
              '<td>' + parent.schoolId + '</td>' +
              '<td>' + parent.schoolName + ' ' + parent.commune +
              '</td>' +
              '</tr>';
          });
          newRow = newRow + '</tbody></table></td></tr>';
        }
        $(newRow).insertAfter($this);
      }
    });
  } else {
    $(this).closest('tr').slideToggle();
    var $detailRow = $(this).closest('tr').next('tr').hasClass('expand-child');
    $detailRow.style.visibility.toggle('table-row collapse');
    $(e.target).toggleClass('glyphicon-eye-close glyphicon-eye-open');
  }
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<container>
  <table class="table table-striped table-hover js-table">
    <thead>
      <tr>
        <th>Training</th>
        <th>Title</th>
        <th>Date</th>
        <th>End date</th>
        <th>Description</th>
        <th>nb of Applicants</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tr data-toggle="collapse" data-target="#collapse4039" class="clickable">
      <td>Activités nautiques</td>
      <td>Activités nautiques - 16/10/2016</td>
      <td>16/oct./2016</td>
      <td>13/oct./2016</td>
      <td>Sequelae of viral hepatitis</td>
      <td>15</td>
      <td>
        <div class="btn-group btn-group-sm" role="group" aria-label="...">
          <div class="btn-group " role="group" aria-label="Voir le detail">
            <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4039 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits">
              <span class="glyphicon glyphicon-eye-close" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>

          <div class="btn-group " role="group" aria-label="Valider les candidats">
            <a href="valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats">
              <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>
          <div class="btn-group " role="group" aria-label="Imprimer la liste d'emargement pour cette formation">
            <a href="/edsa-AgrementEPS/app_dev.php/formation/4039/liste?print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 16/10/2016" title="Download PDF list of applicants">
              <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>
        </div>
      </td>
    </tr>
    <tr data-toggle="collapse" data-target="#collapse4095" class="clickable">
      <td>Activités nautiques</td>
      <td> Activités nautiques - 24/10/2016</td>
      <td>24/oct./2016</td>
      <td>21/oct./2016</td>
      <td>Severe pre-eclampsia, third trimester</td>
      <td>0</td>
      <td>
        <div class="btn-group btn-group-sm" role="group" aria-label="...">
          <div class="btn-group hidden" role="group" aria-label="Voir le detail">
            <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4095 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits">
              <span class="glyphicon " aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>

          <div class="btn-group hidden" role="group" aria-label="Valider les candidats">
            <a href="/valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats">
              <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>
          <div class="btn-group hidden" role="group" aria-label="Imprimer la liste d'emargement pour cette formation">
            <a href="/print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 24/10/2016" title="Download PDF list of applicants">
              <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>
        </div>
      </td>
    </tr>
    <tr data-toggle="collapse" data-target="#collapse3188" class="clickable">
      <td>Activités nautiques</td>
      <td>Activités nautiques - 29/10/2016</td>
      <td>29/oct./2016</td>
      <td>26/oct./2016</td>
      <td>Other secondary chronic gout</td>
      <td>0</td>
      <td>
        <div class="btn-group btn-group-sm" role="group" aria-label="...">
          <div class="btn-group " role="group" aria-label="Voir le detail">
            <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4039 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits">
              <span class="glyphicon glyphicon-eye-close" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>

          <div class="btn-group " role="group" aria-label="Valider les candidats">
            <a href="valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats">
              <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>
          <div class="btn-group " role="group" aria-label="Imprimer la liste d'emargement pour cette formation">
            <a href="/liste?print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 16/10/2016" title="Download PDF list of applicants">
              <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span>
            </a>
          </div>
        </div>
      </td>
    </tr>

  </table>
</container>

＆＃13;

Answer 1

主要问题是您附加了ID以便在错误的元素上进行折叠。它应附加到tr.expand-child元素而不是.expand-child td元素。

只有在获得AJAX响应后，我才会完整地构建.expand-child行。

缓存您将重复使用的元素是一个好习惯。

以下是我修改代码的方法：

var $table = $('.js-table');

$table.find('.js-view-parents').on('click', function(e) {
    e.preventDefault();
    // cache elements
    var $btn = $(e.target), $row = $btn.closest('tr'),
        // find next immediate .expand-child
        $nextRow = $row.next('tr.expand-child'); 
    // toggle button
    $btn.toggleClass('glyphicon-eye-close glyphicon-eye-open');
    // if .expand-child row exist already, toggle
    if ($nextRow.length) {
        // show or hide .expand-child row if eye button is open or not, respectively
        $nextRow.toggle($btn.hasClass('glyphicon-eye-open'));
    // if not, create .expand-child row
    } else {
        $.ajax({
            url: '/echo/json/',
            dataType: "json",
            data: parentsData,
            success: function (parentsData) {
                var newRow = '<tr class="expand-child" id="collapse' + $btn.data('id') + '">' +
                    '<td colspan="12">' +
                    '<table class="table table-condensed table-bordered" width=100% >' +
                    '<thead>' +
                    '<tr>' +
                    '<th>Surname</th>' +
                    '<th>FirstName</th>' +
                    '<th>School Id</th>' +
                    '<th>School name</th>' +
                    '</tr>' +
                    '</thead>' +
                    '<tbody>';
                if (parentsData.parents) {
                    $.each(parentsData.parents, function(i, parent) {
                        newRow += '<tr>' +
                        '<td>' + parent.Firstname + '</td>' +
                        '<td>' + parent.Surname + '</td>' +
                        '<td>' + parent.schoolId + '</td>' +
                        '<td>' + parent.schoolName + ' ' + parent.commune + '</td>' +
                        '</tr>';
                    });
                }
                newRow += '</tbody></table></td></tr>';
                $row.after(newRow);
            }
        });
    }
});

Demo

出于演示目的，我已经注释掉了AJAX调用。

Answer 2

else阻止了一些错误。首先，

$(this).closest('tr').slideToggle();

将向上滑动您的父行，这不是您想要的 - 您想要隐藏子行。

 var $detailRow = $(this).closest('tr').next('tr').hasClass('expand-child');

hasClass()将返回一个布尔值，您不能使用它来过滤jQuery集合。您要做的是选择具有类<tr>的下一个.expand-child，如下所示：

var $detailRow = $(this).closest('tr').next('tr.expand-child');

下一行完全没有意义。

$detailRow.style.visibility.toggle('table-row collapse');

我想你想要切换那一行的类：

$detailRow.toggleClass('table-row collapse');

这些更改将首次显示/隐藏工作。但是你的if块也存在问题：

$(".expand-child").slideUp();

这将选择DOM中具有类.expand-child的所有元素。但您可能只想选择当前父行的子行。但是，我不打算为你调试这整个代码。我想，我已经明确了一些主要问题（见这个更新的小提琴：https://jsfiddle.net/r7sgL7vy/2/），你希望能够自己从这里继续。

还有一个问题：为了提高性能，请存储您在变量中多次使用的jQuery集合，而不是每次需要时查询它们。您已经使用$detailRow和$this = ...执行此操作 - 但是因此未使用它。为什么不在click事件处理程序的开头选择并声明所有需要的dom元素，然后在任何地方使用它们？除了性能因素外，它还使您的代码更清晰，更易于理解（适合您和其他人），并且更容易发现逻辑中的任何错误。

引导表行详细信息 - ajax数据

2 个答案: