获得所选导航丸的价值

问题描述 投票：0回答：1

我正在尝试制作一对导航丸，在一组数据的图形和表格输出之间进行选择，我似乎无法弄清楚如何获取导航丸的价值。我将导航丸定义如下：

<div class="col-md-2">
        <ul class="nav nav-pills nav-stacked">
            <li {% if type_display == 'charts' %}class="active"{% endif %}><a href="charts" class="text-primary"><i class="fa fa-fw fa-bolt"></i> Charts</a></li>
            <li {% if type_display == 'tables' %}class="active"{% endif %}><a href="tables" class="text-primary"><i class="fa fa-fw fa-calendar"></i> Tables</a></li>
        </ul>

他们像这样渲染：enter image description here

如何将选定的导航丸传回django？我试过了：

display_type = request.GET.getlist('charts')

我几乎没有HTML经验，所以任何信息都会很棒。谢谢！

html django navigation
1个回答
1
投票

我看到我之前的答案（下面）可能有点复杂，以实现你想要的。由于您似乎在页面中使用了链接，我建议如下：

使用正确的urlpattern将参数传递给您的视图并链接您的视图，如下所示：

模板/ HTML：

<div class="col-md-2">
        <ul class="nav nav-pills nav-stacked">
            <li {% if type_display == 'charts' %} class="active"{% endif %}><a href="{% url 'yourview' charts %}" class="text-primary"><i class="fa fa-fw fa-bolt"></i> Charts</a></li>
            <li {% if type_display == 'tables' %} class="active"{% endif %}><a href="{% url 'yourview' tables %}" class="text-primary"><i class="fa fa-fw fa-calendar"></i> Tables</a></li>
        </ul>

url.pat中的urlpattern

urlpatterns = [
    path('yoururl/<str:choice>/', views.yourview, name='yourview'), # Django 2
    url(r'^yoururl/(?P<choice>\w+)/$',views.yourview, name='check yourview'), # Django 1.11 and previous
]

views.朋友

def yourview(request, choice):
    # In your view you can now access the choice. Like so:
    print(choice)

但这都是非常基本的Django东西，我想你已经知道了。这将使Django重新加载整个页面，虽然这也可以与Ajax结合使用，如下所述。以下方法可以防止必须加载整个新页面。上面使用的链接样式也可以在下面的代码中使用，而不是使用表单。

请让我知道，如果你有任何问题。

以下是一种更复杂的方式，但它允许用户留在页面中

我做的方式如下，虽然可能有更好的方法，因为我现在只编程了几个月。

您可以使用单选按钮输入类型的形式。我假设您对形式有所了解，因为您使用Django。

在这里，您可以找到有关使用表格（无线电输入类型）https://www.w3schools.com/html/html_forms.asp的更多信息

但你不想看到单选按钮，我相信你可以隐藏它们。这个网站可能会帮助你（我不确定这是页面有答案，但我相信有一个非常简单的方法来隐藏单选按钮）：

https://www.jotform.com/answers/22605-How-to-make-radio-buttons-invisible

我对“导航丸”没有经验，但我很确定你可以将导航丸显示为单选按钮选项的内容：

<input type="radio" name="gender" value="male" checked> <nav-pill-goes-here><br>

希望这能为您提供另一种视角。

编辑：

缺点是您通常需要一个提交按钮来将您的信息发送到视图（使用表单时），但您可能不希望页面中有额外的按钮。你可以通过使用Ajax（使用JavaScript / jQuery）解决这个问题，但是如果你不知道它是如何工作的，你可能需要学习一些，这可能不是你想要的。如果您这样做，我建议您查看本教程：

https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html

使用ajax，您可以点击其中一个选项，将发布请求发送到视图而不离开页面，但仍然可以根据需要处理输入视图。

例

我在这里做了一个例子。我也尝试隐藏单选按钮，但我需要做更多的研究，如何做到这一点，仍然能够选择选项。但这指向一种可能的解决方案。你只需要添加导航丸，隐藏单选按钮，并有适当的视图来处理逻辑。

请注意，您需要使用jQuery才能工作，我在</body>标记结束之前加载了jQuery。 Bootstrap 4也使用jQuery，但它使用的是slim版本。你可以用这个版本替换slim版本，虽然这个版本是3.3.1，而bootstrap现在加载3.2.1，但我认为这是一个很小的问题。

示例html / template

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form method="post" action="{% url 'offer:radio_test' %}" id="chart-table-form">
  {% csrf_token %}
  <input type="radio" name="radio-option" value="chart"> Chart<br>
  <input type="radio" name="radio-option" value="table"> Table<br>
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
  $(function() {
    var form = $("#chart-table-form");
    document.getElementById("chart-table-form").addEventListener("click", function() {
      $.ajax({
        url: form.attr("action"),
        type: "post",
        data: form.serialize(),
        dataType: "json"
      });
      return false;
  });
});
</script>
</body>
</html>

views.朋友

def radio_test(request):
    if request.method == 'POST':
        print(request.POST.get("radio-option")) # This will return the value 'chart' or 'table' / have you access the radio button value
    return render(request, 'offer/radio_test.html')
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.