當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Odoo 12开发之看板视图和用户端 QWeb

發(fā)布時間：2023/12/13 综合教程 70 生活家

生活随笔收集整理的這篇文章主要介紹了 Odoo 12开发之看板视图和用户端 QWeb 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Odoo 12開發(fā)之看板視圖和用戶端 QWeb

前言:

Qweb是odoo使用的模板引擎,基于xml來生成HTML片段和頁面.
通過Qweb可生成豐富的看板視圖,報表和cmx

一·了解看板

# 兩種布局	
	# 1. 卡片列表
	# 2. 組織成不同的卡片

二·設計看板視圖

優(yōu)先級、看板狀態(tài)和顏色

# 看版中其他字段:
	priority  #   讓用戶組織他們的工作項，標記什么應優(yōu)先處理
	kanban_state  #   標記是否應移向下一階段或因某種原因原地不動。在模型定義層中兩者都是選擇項字段。在視圖層，對它們有特別的組件用于表單和看板視圖。
    color   # 用于存儲看板卡片顯示的顏色，并可通過看板視圖中的顏色拾取器菜單設置
	# 如下例:
    class Checkout(models.Model):
        ...
        priority = fields.Selection(
            [('0', 'Low'),
             ('1', 'Normal'),
             ('2', 'High')],
            'Priority',
            default='1')
        kanban_state = fields.Selection(
            [('normal', 'In Progress'),
             ('blocked', 'Blocked'),
             ('done', 'Ready for next stage')],
            'Kanban State',
            default='normal')

看板卡片元素

# 看板視圖框架包含了一個<kanban>外層元素和一下基礎結構
# 看板支持屬性:
	default_group_by  #  設置默認列分組使用的字段
	default_order  #  設置看板項默認使用的排序
 	quick_create=”false”  #  禁用了每列頂部的快速創(chuàng)建選項（大的加號符號），快速創(chuàng)建只需提供標題描述即可創(chuàng)建新項。false是 JavaScript 的語法，必須是小寫字母。
	class  #  為渲染看板視圖的根元素添加 CSS 類。相關類是_kanban_small_column，讓列比默認的更加緊湊。其它類可由我們模塊的 CSS 文件來進行提供。
 	group_create, group_edit, group_delete和quick_create_view   #  可設置為 false 來禁用看板列上對應的操作。如group_create=”false”刪除右側添加新列的按鈕。
	on_create  #  用于創(chuàng)建用戶點擊左上角 Create 按鈕時彈出的自定義簡單表單視圖窗口。應為相應的表單視圖添加<module>.<xml_id>值。
    
    
    
    
### <progressbar> 如下屬性:
	field	#  是對列中各項進行顏色分組的字段名
	colors	#  是一個字典，將分組字段值與以下三種顏色分別進行映射：danger (紅色), warning (黃色)或success (綠色)。
	sum_field	#  是一個可選項，用于選取整列匯總的字段名。如未設置，會使用各項的計數(shù)值。

<kanban default_group_by="stage_id" class="o_kanban_small_column">
    <!-- Fields -->
    <field name="stage_id" />
    <field name="id" />
    <field name="color" />
    <field name="kanban_state" />
    <field name="priority" />
    <field name="message_partner_ids" />

    <!-- Optional progress bar -->
    <progressbar
                 field="kanban_state"
                 colors='{"done": "success", "blocked": "danger"}' />
    <!-- Templates with HTML snippets to use -->
    <templates>
        <t t-name="kanban-box">
            <!-- HTML Qweb template -->
        </t>
        </template>
</kanban>

三·Qweb模板語言

# QWeb 會查找模板種的特殊指令,并動態(tài)的替換掉生成的HTML.
# 對于使用帶有QWeb指令的(t-if t-foreach)的特殊元素.該元祖不會在最終產生的xml/html有任何輸出
# QWeb指令常使用運算的表達式生成不同結果:
    # 報表和網頁使用服務端QWeb的python實現(xiàn)
    # 看板使用客戶端js實現(xiàn),即看板視圖種的QWeb表達式應使用js編寫
    
    
### 看板視圖 , 內部的步驟流程
	# 1. 獲取模板的XML進行渲染
	# 2. 調用服務端read()方法來獲取模板中所涉及的字段數(shù)據(jù)
	# 3. 定位kanban-boxs模板并使用QWeb解析它來輸出最終的HTML片斷
	# 4. 在瀏覽器顯示(DOM)中注入 HTML

QWeb JavaScript 運行上下文

# QWeb指令使用表達式的運行來生成結果
	raw_value  # 是由服務端read()方法返回的值
	value  # 根據(jù)用戶設置來格式化
	widget  # 是當前KanbanRecord()組件對象的引用,用于在看板種渲染當前記錄
	record # 是 widget.record的簡寫形式,使用點號標記來提供對可用字段的訪問
	read_only_mode # 標識當前視圖是否為讀模式(非編輯模式)是widget.view.options.read_only_mode的簡寫形式。
    instance # 是對全部網頁客戶端實例的一個引用
    
### XML 標準中，這些字符具有特殊含義
    lt是小于
    lte是小于等于
    gt是大于
    gte是大于等于

字符串替換動態(tài)屬性– t-attf

# t-attf 來作為頂級<div>元素設置一個類,根據(jù)卡片的color字段值來顯示顏色
# t-attf 指令查找代碼塊運行并替換結果,通過{{}} 和#{{}} 來進行分隔. 代碼塊的內容是任意js表達式,QWeb表達式中的任意可用變量.

# 例子:
	t-attf-class="oe_kanban_text_red" # 顯示為紅色
	t-attf-class="oe_kanban_text_{{
                  record.priority.raw_value lt '2'
                  ? 'black' : 'red'}}"  # 記錄的星星小于2是黑色,否則是紅色

<li t-attf-class="oe_kanban_text_{{
                  record.priority.raw_value lt '2'
                  ? 'black' : 'red'}}">
    <field name="user_id" />
</li>

表達式動態(tài)屬性 t–att–

# t-att- 是QWeb指令通過表達式動態(tài)生成的屬性值.
# .value字段返回在屏幕上顯示的值,鼠標懸停在圖像上時就會顯示相對于的用戶名.
t-att-title="record.member_id.value"

循環(huán) – t-foreach

# t-foreach 指令接受一個js表達式. 
    t-as  指令設置別名,

### rec 變量
    rec_index是迭代索引，從0開始
    rec_size是集合中的元素數(shù)量
    rec_first在迭代的第一個元素中為真
    rec_last在迭代的最后一個元素中為真
    rec_even在索引為偶數(shù)時為真
    rec_odd在索引為奇數(shù)時為真
    rec_parity根據(jù)當前索引為odd或even
    rec_all表示進行迭代的對象
    rec_value在迭代{key:value} 字典時，存儲value (rec存儲鍵名)
    
### t-foreach="record.message_partner_ids.raw_value.slice(0, 3)"
	是對取到內容進行了切片

<t t-foreach="record.message_partner_ids.raw_value.slice(0,3)" t-as="rec">
    <img t-att-src="kanban_image('res.partner',%20'image_small',%20rec)"
        class="oe_avatar" width="24" height="24" alt="" />
</t>

條件判斷 – t-if

<t t-if="record.num_books.raw_value == 0">
    <li>No books.</li>
</t>
<t t-elif="record.num_books.raw_value gt 9">
    <li>A lot of books!</li>
</t>
<t t-else="">
    <li><field name="num_books" /> books.</li>
</t>

渲染值 t-esc和t-raw

### <field/>元素可以渲染值 t-esc 也可以渲染值, t-raw是確定數(shù)據(jù)是否安全的渲染值(避免使用)

# t-esc 指令運行表達式并將其渲染為轉義后的 HTML 值
	<t t-esc="record.message_partner_ids.raw_value" />
# t-raw 確定源數(shù)據(jù)是安全的，可以無需轉義使用t-raw 來渲染原始值
	<t t-raw="record.message_partner_ids.raw_value" />

為變量設置值 – t-set

# 對于更復雜的邏輯，可以將表達式結果存儲在變量中
# t-set指令來實現(xiàn),設置變量名
# t-value指令來添加表達式計算分配的值

<t t-set="red_or_black"
   t-value="record.priority.raw_value gte '2' ? 'oe_kanban_text_red' :''" />
<li t-att-class="red_or_black">
    <field name="user_id" />
</li>

調用和復用其它模板 – t-call

# 重復調用  , 一句 t-name設置的名字.可重復調用

<t t-name="follower_avatars">
    <div>
        <t t-foreach="record.message_partner_ids.raw_value.slice(0,3)"
           t-as="rec">
            <img t-att-src="kanban_image('res.partner',%20'image_small',%20rec)"
                 class="oe_avatar" width="24" height="24" alt="" />
        </t>
    </div>
</t>

### 重復調用
<t t-call="follower_avatars" />

### 更優(yōu)雅的方式實現(xiàn) 調用模板傳遞參數(shù)
# slice(0,arg_max)
<t t-name="follower_avatars">
    <div>
        <t t-foreach="record.message_partner_ids.raw_value.slice(0, arg_max)"
           t-as="rec">
            <img t-att-src="kanban_image('res.partner',%20'image_small',%20rec)"
                 class="oe_avatar" width="24" height="24" alt="" />
        </t>
    </div>
</t>

### 子模板調用時定義arg_max變量
<t t-call="follower_avatars">
    <t t-set="arg_max" t-value="3" />
</t>

字典和列表動態(tài)屬性

### 映射
# 定義:<p t-att="{'class': 'oe_bold', 'name': 'Hello'}" />
# 輸出:<p class="oe_bold" name="Hello" />

### pair
# 定義:<p t-att="['class', 'oe_bold']" />
# 輸出:<p class="oe_bold" />

四·看板視圖的繼承

# 與普通視圖的繼承一樣

# XPath 查找<t t-name=”kanban-box”>元素內的<field name=”display_name”>
<record id="res_partner_kanban_inherit" model="ir.ui.view">
    <field name="name">Contact Kanban modification</field>
    <field name="model">res.partner</field>
    <field name="inherit_id" ref="base.res_partner_kanban_view" />
    <field name="arch" type="xml">
        <xpath expr="http://t[@t-name='kanban-box']//field[@name='display_name']"
               position="before">
            <span>Name:</span>
        </xpath>
    </field>
</record>

五·自定義 CSS 和 JavaScript

# 自定義css和js文件

# 步驟 
	# 1. 在views目錄下新建checkout_kanban_assets.xml數(shù)據(jù)文件加載樣式
	# 2. 在static/src/css編寫css  src/js編寫js
	# 3. 將數(shù)據(jù)文件加載到__manifest__.py的data種

# library_checkout/views/checkout_kanban_assets.xml：
<odoo>
    <template id="assets_backend" inherit_id="web.assets_backend"
        name="Library Checkout Kanban Assets">
        <xpath expr="." position="inside">
            <link rel="stylesheet"
                href="/library_checkout/static/src/css/checkout_kanban.css" />
            <script type="text/javascript"
                src="/library_checkout/static/src/js/checkout_kanban.js">
            </script>
        </xpath>
    </template>
</odoo>

總結

以上是生活随笔為你收集整理的Odoo 12开发之看板视图和用户端 QWeb的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基本数据类型与String之间的转换
下一篇： [国家集训队2011]排队(魏铭)