查看“Kanban卡布局”的源代码
←
Kanban卡布局
跳转至:
导航
、
搜索
因为以下原因,你没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看并复制此页面的源代码:
看板卡片的主要内容区域是在kanban-box模板中定义的。此内容区域还可以有页脚子容器。 <nowiki>一个单一的页脚,通过oe_kanban_footer CSS类我们将在kanban box的底部使用<div>元素。这个类将自动分割其内部元素适应空间,实现左右对。</nowiki> 打开一个动作菜单的按钮也可以在卡的右上角。作为替代方案,Bootstrap提供pull-left和pullright类,可以用来在卡的任何地方添加左对齐或右对齐元素,包括在oe_kanban_footer页脚。 这是我们为我们的看板卡Qweb模板第一次循环: <nowiki><!-- 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> </nowiki> 这就列出了看板卡的总体结构。您可能注意到,color颜色字段正在使用在顶部<div>元素中,以动态设置卡片的颜色。我们将在下一个章节解释t-attf Qweb指令。 现在让我们来研究主要内容区域,并选择在那里放置什么内容: <nowiki><!-- 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> </nowiki> 大多数模板是常规的HTML,但我们也看到了用于渲染字段值的<field>元素,以及在常规窗体视图按钮中使用的type属性,在此用作<a>锚定标记。 在左边的页脚,我们要插入一个优先级(priority)部件: <nowiki><div> <!-- Left hand footer... --> <field name="priority" widget="priority"/> </div> </nowiki> 这里我们可看到priority字段被增加,与在表单视图做的一样。 在右边页脚,我们放置看板状态(state)部件和代办任务的所有者的头像: <nowiki><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> </nowiki> 使用<field>元素添加看板状态,就像在常规窗体视图中一样。用户头像图片插入使用HTML<img> 标记。图像的内容是使用Qweb的 t-att-指令动态生成的,我们将在稍后解释。 有时我们希望有一个小的代表性的图像显示在卡上,如同联系人的例子。作为参考,可以通过添加以下内容作为第一个内容元素: <nowiki><img t-att-src="kanban_image( 'res.partner', 'image_medium', record.id.value)" class="o_kanban_image"/></nowiki>
返回至
Kanban卡布局
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
odoo 中文开发手册
odoo 开发参考
odoo 实施笔记
Odoo 最佳方案
关于 OdooV
Odoo FAQ
工具
链入页面
相关更改
特殊页面
页面信息
友情链接
odoo官网
odoo中文网
odoo实施