django 奇偶数

最新推荐文章于 2022-03-24 20:38:47 发布

我在北京吃泡面

最新推荐文章于 2022-03-24 20:38:47 发布

阅读量851

点赞数

分类专栏： python

本文链接：https://blog.youkuaiyun.com/yjf997234900/article/details/8830038

版权

python 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在 Django 中自定义模板方法，以实现类似奇偶数的效果。通过在 model.py 文件中编写相应代码，并结合 CSS，实现联系日期的倒序排列，同时在每条记录的左侧或右侧展示详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道django 没有实现奇偶数的模板，所以我们自己写一个方法实现一个类似奇偶数实现的效果

model.py 如下

class CustomerDetail(models.Model):
	customer = models.ForeignKey(CustomerInfo)
	contact_time= models.DateTimeField('联系日期',auto_now_add=False,db_index = True)
	detail = models.TextField('联系详情',max_length=256,help_text='联系过程记录')
	class Meta:
		app_label = 'customer'
		
	def __unicode__(self):
		return self.detail

联系日期按倒序排列，然后左边或者右边跟上对应的联系详情，

	try:
		customerDetail=CustomerDetail.objects.filter(customer_id=cid).order_by('-contact_time')//按倒序得到一个查询集
		
		customerDetail = list(customerDetail)//将查询集对象转为list对象,，然后我们可以用list一些方法了

		for k in xrange(len(customerDetail))://xrange和range用法完全相同，只是生成的对象不同
			print k  //按上面的图 k为0，1,2
			if k%2 == 0:
				customerDetail[k].right = 'true' 
			else:
				customerDetail[k].right = 'false'
	except:
		pass

html页面

<div class="timeline">
              {%for element in customerDetail%}
              {% ifequal element.right 'true' %}
                <div class="timeslot alt">//设置联系详情的样式在右边
              {% else %}
                <div class="timeslot">
              {% endifequal %}
                <div class="task">
                  <span>
                    <span class="details" style="min-height:20px;">
                      {{element.detail}}
                    </span>
                  </span>
                  <div class="arrow"></div>
                </div>
                <div class="icon"><i class="icon-user icon-large" style="color:#fff"></i></div>
                <div class="time">{{element.contact_time|date:"Y-m-d"}}</div>
              </div>
              {%endfor%}
              
            </div>
          </div>

css代码：

.timeline {
    background: url("../img/timeline-bg.png") repeat-y scroll center top transparent;
    height: 100%;
    margin: 20px 80px;
}
.timeline .timeslot {
    display: inline-block;
    margin: 5px 0;
    position: relative;
    width: 100%;
}
.timeline .timeslot.alt .task {
    right: 0;
}
.timeline .timeslot .task {
    position: absolute;
    width: 45%;
}
.timeline .timeslot .task span {
    border: 2px solid #67C2EF;
    border-radius: 4px 4px 4px 4px;
    display: block;
    padding: 5px;
}
.timeline .timeslot .task span span {
    border: 0 none;
    padding: 0;
}
.timeline .timeslot .icon {
    background-color: #3B3B41;
    border: 2px solid #67C2EF;
    border-radius: 50em 50em 50em 50em;
    height: 30px;
    left: 50%;
    line-height: 30px;
    margin-left: -16px;
    position: absolute;
    text-align: center;
    width: 30px;
    z-index: 2;
}
.timeline .timeslot .time {
    background: none repeat scroll 0 0 #E0E0E0;
    border-radius: 4px 4px 4px 4px;
    left: 50%;
    margin-top: 1px;
    padding: 5px 10px 5px 40px;
    position: absolute;
    top: 1px;
    z-index: 1;
}
.timeslot.alt .time {
    left: auto;
    padding: 5px 40px 5px 10px;
    right: 50%;
    top: 1px;
}
.timeslot .task .arrow {
    background: url("../img/arrow_left.png") no-repeat scroll 0 0 transparent;
    height: 20px;
    position: absolute;
    right: -18px;
    top: 6px;
    width: 20px;
}
.timeslot.alt .task .arrow {
    background: url("../img/arrow_left.png") no-repeat scroll 0 -20px transparent;
    height: 20px;
    left: -8px;
    position: absolute;
    top: 6px;
    width: 20px;
}

就可以完成上面的效果了