0
Djangoの最初のタイマーと何かのMVCですので、今すぐ学んでいるので、私は簡単に行ってください。クリックするとページのモデルデータが変更されます
私はこのビューを持っています。左側にメニューがあり、製品のリストがあります。メニューの隣には、製品の説明、写真、便利なリンク（3つのタブ）が含まれているはずのタブの内容が表示されます。メニューに表示されるすべての情報とタブの内容は、データベースに保存され、モデルを通じてアクセスされます。
私は何をしたいが、私は左で製品をクリックすると、適切な情報がタブのコンテンツにロードされるということです。これは私のページがどのように見えるかの草稿です。
ビューは次のようになります。
def details(request, clientName):
client = Client.objects.get(clientName=clientName)
products = Product.objects.filter(clientID=client.clientID)
productTypes = Product.objects.filter(clientID=client.clientID).values_list('productType', flat=True)
productDetails = ProductDetail.objects.get(productID=1)
#Since there is no distinct in SQLite, I use this code to get all individual values of productType
productTypeList = []
for productType in productTypes:
if productType not in productTypeList:
productTypeList.append(productType)
clientList = Client.objects.all()
context = {
'client': client,
'products': products,
'productDetails': productDetails,
'productTypes': productTypeList,
'clientList': clientList,
'nav': 'products',
}
return render(request, 'prsales/details.html', context)
テンプレートです：タブのコンテンツ内
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
{% include "prsales/head.html" %}
<br />
<div class="text-center">
<img src="{% static client.clientHeader %}">
</div>
</head>
<body>
<div class="col-lg-3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
{% for productType in productTypes %}
<li class="nav-header">{{ productType }}</li>
{% for product in products %}
{% if product.productType == productType %}
<li><a href="#">{{ product.productName }}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="col-lg-9">
<ul class="nav nav-tabs nav-pills">
<li role="presentation" class="active"><a href="#tab1" data-toggle="tab" aria-controls="tab1" role ="tab">Description</a></li>
<li role="presentation"><a href="#tab2" data-toggle="tab" aria-controls="tab2" role ="tab">Gallery</a></li>
<li role="presentation"><a href="#tab3" data-toggle="tab" aria-controls="tab3" role ="tab">Manuals</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tab1">
<div class="panel panel-jumbotron panel-default">
<div class="panel-body">
<h3>Product Name</h3>
<p>{{ productDetails.detail }}</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab2">
<div class="panel panel-jumbotron panel-default">
<div class="panel-body">
<ul>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab3">
<div class="panel panel-jumbotron panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray">
<img class="img-responsive" src="http://placehold.it/400x300" alt="" >
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
、あなたは{{productDetails.detail}}変数を参照することができ、これは私が何をしたいですメニューの何をクリックするかによって変わります。
私が解決策として考えたことの1つは、各製品のタブコンテンツを作成し、クリックして表示して非表示にすることでしたが、それは私の意見では恐ろしい解決策です。私はちょうど1つのタブのコンテンツを必要とし、クリック時に動的にコンテンツを変更します。
また、私はこれに新しいので、私のためのあなたの提案は歓迎以上のものです。
これは基本的に私が探していたものです。どうもありがとう！ – plasmy