Question

我有两个divs，其中两个都显示一个表格。我将直接从数据库中填充第一个表的wit值。但是在第二个div中，我需要显示在div1中选择的项目的子类别。我将从DB中获取所有项目及其子项目。还将为每个div项目动态分配一个ID。如何根据div1的选择获得商品？

我正在FLASK

工作

样本数据：

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

因此，在table 1中，我将有item1,item2,item3等。如果我在item1中选择table 1，则在table2的{{1}}中，我需要查看与div2相对应的子项，依此类推。有没有办法用简单的item1来做到这一点？

我的代码：

javascript

Answer 1

您可以将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))})

如何显示基于另一个div的选择的div值？

1 个答案: