Аккордеонный Bootstrap стол с пробелами - PullRequest
Новая
       35

Аккордеонный Bootstrap стол с пробелами

0 голосов
/ 13 марта 2019

Я видел вопросы, связанные с аккордеоном, но не полностью с моей конкретной потребностью. Моя таблица заполняется с помощью пробелов, более конкретно каждый вложенный цикл, как это: 

<tbody>
{{#each piece in pieces}}
    <tr id="{{piece._id}}" class="itemList table-warning">
        <th class="name tText">{{piece.name}} {{piece._id}}</th>
        <td class="pdf tText" style="text-align: center"><a class ="pdf" href="{{piece.pdf}}" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td>
        <td class="audio tText" style="text-align: center"><a class="audio" href="{{piece.audio}}" target="_blank"><i class="fa fa-volume-up" aria-hidden="true"></i></a></td>
        <td class="format tText">{{piece.instrumentation}}</td>
        <th class="price tText" >${{piece.price}}</th>
        <td><input class ="qty" type ="number" name ="quantity" value="0" min="0"></td>
    </tr>
<!-- Row that is being clicked-->
    <tr class="partsList">
        <td colspan="3"></td>
        <th class="partName tText">{{piece.name}} Parts</th>
        <td colspan="2"></td>
    </tr>

    {{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
        <tr class="partList">
            <td colspan="3"></td>
            <td class="pname tText">{{piece.name}}: {{part.pname}}</td>
            <td class="price tText">${{part.pprice}}</td>
            <td><input class="qty" type="number" name="quantity" value="0" min="0"></td>
        </tr>
    {{/each}}
{{/each}}
</tbody>

У меня есть функция щелчка вот так: 

'click .partsList': function(e){
    e.preventDefault();
    $('.partList').nextUntil('tr.itemList').toggle();
}

Функция аккордеона работает, однако она работает с каждым экземпляром каждого цикла. то есть каждый tr class ="partsList" будет аккордеонным одновременно при нажатии.

Насколько я понимаю каждый цикл, я могу получить доступ к _id документа, используя {{piece._id}}. Однако если я установлю идентификатор строки таблицы равным этому, он будет считывать только _id ПЕРВОГО документа в коллекции.

Мне нужно щелкнуть для <tr class="partList"> аккордеона на основе _id. Или, может быть, вы пошли бы по-другому, чем таблицы начальной загрузки?

Пожалуйста, дайте мне знать, если мой вопрос нуждается в разъяснении.

1 Ответ

1 голос
/ 14 марта 2019

Вы можете отфильтровать нажатые .partslist, используя атрибут data-*.Это заставляет jQuery выбирать только эти конкретные элементы.Обратите внимание, что вам нужно прикрепить атрибут data-* к строке, по которой вы щелкнули, и к строкам, которые должны свернуться: 

<tbody>
{{#each piece in pieces}}
    ...
    <!-- Row that is being clicked-->
    <!-- use the _id value of the piece context as data attribute -->
    <tr class="partsList" data-id="{{piece._id}}"> 
        <td colspan="3"></td>
        <th class="partName tText">{{piece.name}} Parts</th>
        <td colspan="2"></td>
    </tr>

    {{#each part in piece.parts}}
    <!-- Rows that should accordion -->
    <!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
    <!-- use the _id value of the piece context as data attribute -->
    <tr class="partList" data-target="{{piece._id}}">
    ...
    </tr>
    {{/each}}
{{/each}}
</tbody>

  'click .partsList': function(e, templateInstance){
    e.preventDefault();
    // get the data-id attribute of the clicked row
    const targetId = templateInstance.$(e.currentTarget).data('id')
    // skip if this row is not intended to toggle
    if (!targetId) return
    // toggle based on data-target attribute
    templateInstance.$(`.partList[data-target="${targetId}"]`).nextUntil('tr.itemList').toggle();
  }
...