Kanban卡布局

来自Odoo V
跳转至: 导航搜索

看板卡片的主要内容区域是在kanban-box模板中定义的。此内容区域还可以有页脚子容器。

一个单一的页脚,通过oe_kanban_footer CSS类我们将在kanban box的底部使用<div>元素。这个类将自动分割其内部元素适应空间,实现左右对。

打开一个动作菜单的按钮也可以在卡的右上角。作为替代方案,Bootstrap提供pull-left和pullright类,可以用来在卡的任何地方添加左对齐或右对齐元素,包括在oe_kanban_footer页脚。

这是我们为我们的看板卡Qweb模板第一次循环:

<!-- Define the kanban-box template -->
<t t-name="kanban-box">
<!-- Set the Kanban Card color: -->
<div t-attf-class="#{kanban_color(record.color.raw_value)}     oe_kanban_global_click">
<div class="o_dropdown_kanban dropdown">
<!-- Top-right drop down menu here... -->
</div>
<div class="oe_kanban_content">
<div class="oe_kanban_footer">
<div>
<!-- Left hand footer... -->
</div>
<div>
<!-- Right hand footer... -->
</div>
</div>
</div><!-- oe_kanban_content -->
<div class="oe_clear"/>
</div><!-- kanban color -->
</t>

这就列出了看板卡的总体结构。您可能注意到,color颜色字段正在使用在顶部
元素中,以动态设置卡片的颜色。我们将在下一个章节解释t-attf Qweb指令。

现在让我们来研究主要内容区域,并选择在那里放置什么内容:

 <!-- Content elements and fields go here... -->
<div>
<field name="tag_ids" /></div>
<div>
<strong>
<a type="open"><field name="name" /></a>
</strong></div>
<ul>
<li><field name="user_id" /></li>
<li><field name="date_deadline" /></li></ul>

大多数模板是常规的HTML,但我们也看到了用于渲染字段值的<field>元素,以及在常规窗体视图按钮中使用的type属性,在此用作<a>锚定标记。 在左边的页脚,我们要插入一个优先级(priority)部件:

 <div>
<!-- Left hand footer... -->
<field name="priority" widget="priority"/>
</div>

这里我们可看到priority字段被增加,与在表单视图做的一样。

在右边页脚,我们放置看板状态(state)部件和代办任务的所有者的头像:

 
<div> 
<!-- Right hand footer... -->
<field name="kanban_state" widget="kanban_state_selection"/>
<img t-att- t-att-src="kanban_image( 
    'res.users', 'image_small', record.user_id.raw_value)"     width="24" height="24" class="oe_kanban_avatar pull-right" />
</div>

使用<field>元素添加看板状态,就像在常规窗体视图中一样。用户头像图片插入使用HTML<img> 标记。图像的内容是使用Qweb的 t-att-指令动态生成的,我们将在稍后解释。

有时我们希望有一个小的代表性的图像显示在卡上,如同联系人的例子。作为参考,可以通过添加以下内容作为第一个内容元素:

<img t-att-src="kanban_image( 'res.partner', 'image_medium', record.id.value)" class="o_kanban_image"/>