Как показать значения div на основе выбора из другого div? - PullRequest
Новая
       2

Как показать значения div на основе выбора из другого div?

0 голосов
/ 06 июля 2018

У меня есть два divs, в которых оба отображают таблицу. Я заполню первые значения таблицы непосредственно из базы данных. Но во втором div мне нужно отобразить подкатегории элемента, выбранного в div1. Я буду извлекать все элементы и их подпункты из базы данных. Кроме того, идентификатор * назначается динамически каждому элементу div. Как получить предметы на основе выбора div1?

Я работаю в FLASK

пример данных: 

item1
--subitem1
--subitem2
--subitem3
item1
--subitem1
--subitem2
--subitem3
item1
--subitem1
--subitem2
item1
--subitem1

Так что в table 1 у меня будет item1,item2,item3 и т. Д. И если я выберу item1 в table 1, то в table2 из div2 мне нужно будет увидеть подэлементы, соответствующие item1 и так далее. Есть ли способ сделать это с помощью простого javascript?

Мой код: 

 <div class="card-body">
       <input type="text" class="form-control input-default " placeholder="Search Main Task" id="search1" onkeyup="search();">
       <h5>Main Task</h5>
       <div class="table-responsive">
          <table class="table" id="mastertable">
             <thead>
                <tr>
                   <th>#</th>
                   <th>TASK#</th>
                   <th>Task Name</th>
                   <th>Prefix</th>
                   <th>Sub</th>
                </tr>
             </thead>
             <tbody>
                {% set ns = namespace(num=1) %}
                {% for task in tasklist %}
                <tr>
                   <td>{{ ns.num }}</td>
                   {% for i in range(task|count) %}
                   <td>{{ task[i] }}</td>
                   {% endfor %}
                   <td style="'float: center"><a href="javascript:myFunction();" ><i class="fa fa-eye"></i>View</a></td>
                </tr>
                {% set ns.num = ns.num+1 %}
                {% endfor %}
             </tbody>
          </table>
       </div>
    </div>
    </div>
    <div class="card" style="width:49%;float: right;overflow-y: auto;
       height: 400px;">
       <div class="card-body">
          <input type="text" class="form-control input-default " placeholder="Search Sub Task" id="search2" onkeyup="search1();">
          <h5>Sub Task</h5>
          <div class="table-responsive">
             <table class="table" id="mastertable1">
                <thead>
                   <tr>
                      <th>#</th>
                      <th>Sub task#</th>
                      <th>Task Name</th>
                      <th>task</th>
                   </tr>
                </thead>
                <tbody>
                   {% set ns = namespace(num=1) %}
                   {% for subtask in subtasklist %}
                   <tr>
                      <td>{{ ns.num }}</td>
                      {% for i in range(subtask|count-1) %}
                      <td>{{ subtask[i] }}</td>
                      {% endfor %}
                      <td id="{{ subtask[2] }}">{{ subtask[2] }}</td>
                   </tr>
                   {% set ns.num = ns.num+1 %}
                   {% endfor %}
                </tbody>
             </table>
          </div>
       </div>
    </div>

1 Ответ

0 голосов
/ 06 июля 2018

Вы можете использовать ajax с jquery. ajax позволит вам общаться с вашим внутренним скриптом и предоставлять данные, соответствующие значению элемента:

data_display.html 

<html> 
  <body> 
    <div id='keys'>
      <table>
       <tr>
         <th>Item Name</th>
       </tr>
       {%for item in items%}
         <tr>
           <td><button id='{{item.item_id}}'>{{item.value}}</button></td>
         </tr>
       {%endfor%}
      </table>
    </div>
    <div id = 'values'>
     <table>
      <tr><th>Subitems</th></tr>
      {%for item in items%}
        <tr>
         <td>
           <div id = 'subitem_{{item.item_id}}'></div>
         </td>
        </tr>
      {%endfor%}
     </table>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   $('button').click(function(event) {
    var item_id = event.target.id;
     $.ajax({
     url: "/get_subitems",
     type: "get",
     data: {item_id: item_id},
     success: function(response) {
      $("#subitem_"+response.target_id).html(response.html);
     },
     error: function(xhr) {
      //pass
    }
   });
  });
});
</script>
</html>

Затем в приложении создайте маршруты: 

from collections import namedtuple
@app.route('/display_data', methods=['GET', 'POST'])
def display_data():
  data = [['item1', ['subitem1', 'subitem2', 'subitem3']], ['item2', ['subitem1', 'subitem2', 'subitem3']], ['item3', ['subitem1', 'subitem2']], ['item4', ['subitem1']]]
  #replace data with database query
  item_value = namedtuple('item_value', ['item_id', 'value'])
  return flask.render_template('data_display.html', items = [item_value(i, a) for i, [a, _] in enumerate(data, 1)])

@app.route('/get_subitems')
def get_subitems():
   target_id = int(flask.request.args.get('item_id'))-1
   data = [['item1', ['subitem1', 'subitem2', 'subitem3']], ['item2', ['subitem1', 'subitem2', 'subitem3']], ['item3', ['subitem1', 'subitem2']], ['item4', ['subitem1']]]
   #can replace data with database query
   result = [b for i, [a, b] in enumerate(data) if i == target_id][0]
   return flask.jsonify({'target_id':str(target_id+1), 'html':'<ul>\n{}\n</ul>'.format('\n'.join(f'<li>{i}</li>' for i in result))})

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...