获得所选导航丸的价值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了获得所选导航丸的价值相关的知识,希望对你有一定的参考价值。

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

<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经验,所以任何信息都会很棒。谢谢!

答案

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

使用正确的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')

以上是关于获得所选导航丸的价值的主要内容,如果未能解决你的问题,请参考以下文章

从底部工作表对话框片段中获取价值

导航抽屉backstack,如何让actionbar标题在点击后随片段改变

滚动经过片段时,Angular 10会获得路由器活动片段吗?

通过导航组件在底部导航片段之间传递数据

如何获得选择的垫子选项的价值?

如何在android中以编程方式在片段之间导航?