Получить данные из выбранных элементов Django - PullRequest
Новая
       17

Получить данные из выбранных элементов Django

0 голосов
/ 20 апреля 2020

У меня есть страница, где пользователь может выбирать людей для добавления в свою команду. Одна сторона страницы - это список людей, которых нужно выбрать. Когда пользователь нажимает кнопку Добавить в группу, он переходит к правой стороне, где у нас есть список выбранных людей.

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

Например слева: 

<div class="card-body" id="team-list">                   
   <p class="card-text">Select today's teammates:</p>
   <ul class="list-group list-group-flush">
      {% for tech in techs %}
         <li class="list-group-item">
            <span class="name" name="{{tech.id}}">{{tech.name}}</span>
            <span class="move" style="float: right;">Add to the team</span>
         </li>
      {% endfor %}

и справа: 

<div class="card-body" id="selected-list">
  <h3 class="title">You have selected the following teammates for today: </h3>
  <ul class="list-group list-group-flush" style="list-style-type: none;">

  </ul>
</div>

Клик обрабатывается небольшим js кликом Событие, подобное этому: 

    var selected = document.querySelector('#selected-list ul');
    var team = document.querySelector('#team-list ul');
function clickHandlerTeam(e){


        if(e.target.classList.contains('move')){
            if (e.target.textContent == 'Add to the team'){
                console.log('changing add');
                e.target.textContent ='Remove from the team';
                selected.appendChild(e.target.parentNode);
            } else {
                console.log('changing remove');
                e.target.textContent = 'Add to the team';
                team.appendChild(e.target.parentNode);
            }    

        console.log('****************');

        }
        return;
}

Спасибо за вашу помощь

Ответы [ 2 ]

1 голос
/ 20 апреля 2020 
{{ selected_techs=[] }}
<div class="card-body" id="team-list">                   
   <p class="card-text">Select today's teammates:</p>
   <ul class="list-group list-group-flush">
      {% for tech in techs %}
         <li class="list-group-item">
            <span class="name" name="{{tech.id}}">{{tech.name}}</span>
            <span class="move" onclick="{{ selected_techs.append(tech) }}" style="float: right;">Add to the team</span>
         </li>
      {% endfor %}
</ul>
</p>
</div>

<div class="card-body" id="selected-list">
  <h3 class="title">You have selected the following teammates for today: </h3>
  <ul class="list-group list-group-flush" style="list-style-type: none;">
      {% for tech in selected_techs %}
         <li class="list-group-item">
            <span class="name" name="{{tech.id}}">{{tech.name}}</span>
         </li>
      {% endfor %}
  </ul>
</div>

Я думаю, что это должно решить вашу проблему. Просто не забудьте добавить

Редактировать 1:

Попробуйте это 

{% with selected_techs=[] %}
<div class="card-body" id="team-list">                   
   <p class="card-text">Select today's teammates:</p>
   <ul class="list-group list-group-flush">
      {% for tech in techs %}
         <li class="list-group-item">
            <span class="name" name="{{tech.id}}">{{tech.name}}</span>
            <span class="move" onclick="{% selected_techs.append(tech) %}" style="float: right;">Add to the team</span>
         </li>
      {% endfor %}
</ul>
</p>
</div>

<div class="card-body" id="selected-list">
  <h3 class="title">You have selected the following teammates for today: </h3>
  <ul class="list-group list-group-flush" style="list-style-type: none;">
      {% for tech in selected_techs %}
         <li class="list-group-item">
            <span class="name" name="{{tech.id}}">{{tech.name}}</span>
         </li>
      {% endfor %}
  </ul>
</div>
{% endwith %}
0 голосов
/ 21 апреля 2020

Я нашел свое решение. Я добавил тег формы для каждого из своих элементов в шаблон и удалил ul, заменил его скрытым вводом со значением tech.id и заменил теги span, в которых пользователь нажимал кнопки. Затем обработал его с помощью views.py, получив идентификаторы.

...