Question

所以我想创建一个依赖的选择框，但我仍然是初学者，想尝试旧方法

要点是，第一个下拉列表是数据库名称（dbeaver中的模式），第二个下拉列表是数据库具有的表名称列表

html代码

<div class="form-group">
                  <label class="control-label col-md-3">Table Name</label>
                  <div class="col-md-4">
                    <div class="input-group bootstrap-timepicker">
                       <div class="btn-group">
                            <select style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">              
                            <!-- <li><a href="#"></a></li> -->
                               {% for table_name in obj %}
                                <option>{{ table_name.table_name }}
                              {% endfor %}                          
                            <!-- <li><a href="#">Dropdown link</a></li> -->
                            </option>
                            </select>                    
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-md-3">Column Name</label>
                  <div class="col-md-4">
                    <div class="input-group bootstrap-timepicker">
                       <div class="btn-group">
                            <select style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">              
                            <!-- <li><a href="#"></a></li> -->


                            *here where i want to put the data after i select the first select above*



                            <!-- <li><a href="#">Dropdown link</a></li> -->
                            </option>
                            </select>                    
                      </div>
                    </div>
                  </div>
                </div>

Havent发布帖子并获得第一个选择下拉列表，以发送参数*不知道在何处

views.py

#for  the first dropdown
def list_all_table(request):    
    obj = TableAll.objects.all()
    context = {
        'obj' : obj
    }
    return render(request,'define_segment.html',context)


#for the second dropdown form after you select the first dropdown
def list_all_table2(request):
     #need to get parameter first but how
     dsn_tns = cx_Oracle.makedsn('IP', 'PORT', sid)  
     conn = cx_Oracle.connect(user=r ' ', password=' ', dsn=dsn_tns) 
     c = conn.cursor()
     c.execute("SELECT table_name FROM ALL_TABLES WHERE owner ='"+ variable from firstdropdown +"'")
     for row in c:
        #to insert the data in second select dropdown

     return render(request,'define_segment.html',context)

models.py

import datetime

from django.db import models
from django.utils import timezone

class TableAll(models.Model):
    table_name = models.CharField(max_length=250)

0001_init.py

from django.db import migrations, models
from django.contrib.auth.models import User
import django.db.models.deletion


class Migration(migrations.Migration):

    initial = True

    dependencies = [
    ]

    role = models.CharField(max_length=250)
    role.contribute_to_class(User,'role')    

    operations = [
         migrations.CreateModel(
            name='TableAll',
            fields=[                
                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('table_name', models.CharField(max_length=250)),                
            ],
        ),
    ]

也许有人可以帮助我，谢谢您的帮助！

Answer 1

您需要使用ajax来实现所需的内容。首先，您必须将值设置为表格的ID，并将ID赋予表格的selectbox。

 <select id="tableselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">              
      <!-- <li><a href="#"></a></li> -->
         {% for table_name in obj %}
          <option value="{{table_name.id}}">{{ table_name.table_name }}
        {% endfor %}                          
      <!-- <li><a href="#">Dropdown link</a></li> -->
         </option>
  </select>

之后，使用jQuery的原始AJAX请求获取表ID并发送到视图。如下

    <script>
     $(document).ready(function() {
      $("#tableselect").change(function () {
        var url = "{% url 'load-data' %} ";  
        var table_id = $(this).val(); 
        $.ajax({                       
          url: url,                    
          data: {
            'table_id': table_id      
          },
          success: function (data) {   
            $("#dataselect").html(data);  
          }
        });

      });
      });
  </script>

然后将ID分配给列的选择框，如下所示，并将选项部分留空

<div class="btn-group">
    <select id="dataselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">              


    </select>                    
</div>

之后在您的网址中。

 path('ajax/load-data', views.load_data, name='load-data'),

并创建视图以容纳表ID，并为该ID的列呈现选项。

def load_data(request):
  table_id = int(request.GET.get('table_id'))
  # do something with table_id and render the options in template

  obj = yourModel.objects.filter(#... whaterwer you like with table_id )
  context= {'obj' : obj }
  return render(request, data-list.html, context)

然后创建一个名称为data-list.html的HTML模板，以加载第二个下拉选项。

{% for data in obj %}
<option value="{{ data.id }}">{{ data.yourcolumn }}</option>
{% endfor %}

如何循环从数据库插入数据以使用Django选择表单

1 个答案: