zoukankan      html  css  js  c++  java
  • (21)odoo中的QWeb模板引擎

    -----------------
    更新时间
    18:13 2016-04-05 星期二
    -----------------
    * 概述
        QWeb是odoo主要模板引擎,采用xml表述,最后生成HTML文件
       
    * 一般用法

        #条件表达式
         <t t-if="record.effort_estimate.raw_value > 0">
            <li>Estimate <field name="effort_estimate"/></li>
         </t>
        
         比较符号:
           lt(<)    lte(<=)   gt(>)   gte(>=)
           注 < <= 不能用在表达式中,只能用字母代替
        
        # 输出值 t-esc 和 t-raw
           <t t-esc="record.message_follower_ids.raw_value" />
           <t t-raw="record.message_follower_ids.raw_value" />
           t-esc  过滤安全值,像html元素
           t-raw  数据库中的原始数据
       
        # 循环
            <t t-foreach="record.message_follower_ids.raw_value" t-as="rec">
               <t t-esc="rec" />;
            </t>
            t-foreach="record.message_follower_ids.raw_value.slice(0, 3)" 还可以切片
            还有一些变量
            rec_index 从0开始循环索引
            rec_size  要循环的记录集大小
            rec_first  第一个元素
            rec_last   最后一个元素
            rec_even   index为偶数时为真
            rec_odd    index为奇数时为真
            rec_parity  是偶数和奇数
            rec_all  表示循环结束的标识
            rec_value 循环一个字典时,的键的值
           
        # 动态属性
            <div>
                <t t-foreach="record.message_follower_ids.raw_value.slice(0, 3)"
                t-as="rec">
                  <img t-att-src="kanban_image(
                  'res.partner', 'image_small', rec)"
                   class="oe_kanban_image oe_kanban_avatar_smallbox"/>
                </t>
            </div
            t-att- prefixed 如 <img>的src  就可以 t-att-src="..."
           
         # 属性的字符替换   
            <span t-attf-class="oe_kanban_text{{
                record.date_deadline.raw_value and
                !(record.date_deadline.raw_value > (new Date()))
                ? '_red' : '_black' }}">
                <field name="date_deadline"/>
            </span>
            t-attf-prefixed  取代内容,上面的就是动态类
           
        # 变量设置   
            #设置变量 t-set t-value
            <t t-set="new_variable" t-value="True" />
            设置了变量 new_variable 的值 为 True
            t-value 也可以是表达
             <t t-set="foo" t-value="2+1" >
            设置了变量foo值为3
            t-value可以是一段html
            <t t-set="foo">
                <li>ok</li>
            </t>
            设置了变量foo 为 <li>ok</li>
           
        #设置属性
            t-att-$name
            $name 是属性名
            <div t-att-a="66" />
            结果:
              <div a="66"></div>
             
            t-attf-$name 用于混合,有字符串也有变量,变量用{{}}
            <t t-foreach="[1, 2, 3]" t-as="item">
                <li t-attf-class="row {{ item_parity }}"><t t-esc="item"/></li>
            </t>
           
            t-att=mapping 键值对组成属性,主要用多对
            <div t-at="{'a':1,'b':2}" />
            结果:
             <div a="1" b="2"></div>
            
            t-att=pair 一对,这个对一个是键,后一个是值
             <div t-att="['a','b']" />  <=>    <div t-att="('a','b')" />   
            结果:
              <div a="b"></div>
           
        # 包含其它模板
            <t t-name="follower_avatars">
                <div>
                <t t-foreach="record.message_follower_ids.raw_value.slice(0, 3)"
                t-as="rec">
                    <img t-att-src="kanban_image(
                        'res.partner', 'image_small', rec)"
                        class="oe_kanban_image oe_kanban_avatar_smallbox"/>
                </t>
                </div>
            </t>   
            。。。
            <t t-call='follower_avatars' />
           
            t-call 调用其它模板
           
            复用灵活一些
            <t t-name="follower_avatars">
                <div>
                <t t-foreach="record.message_follower_ids.raw_value.slice(0, arg_max)"
                t-as="rec">
                    <img t-att-src="kanban_image(
                        'res.partner', 'image_small', rec)"
                        class="oe_kanban_image oe_kanban_avatar_smallbox"/>
                </t>
                </div>
            </t>   
            。。。
            <t t-call='follower_avatars'>
               <t t-set="arg_max" t-value='3' />

               <t/>   

        # QWeb 其它指令
           
            <p t-att="{'class': 'oe_bold', 'name': 'test1'}" />
            结果显示
            <p class="oe_bold" name="test1" />
            t-att 接受字典
            <p t-att="['class','oe_bold']"
            结果显示
            <p class="oe_bold">
           
        # card类式加菜单       
            <div class="oe_dropdown_kanban oe_dropdown_toggle">
                <span class="oe_e">í</span>
                <ul class="oe_dropdown_menu">
                    <t t-if="widget.view.is_action_enabled('edit')">
                        <li>
                            <a type="edit">Edit...</a>
                        </li>
                    </t>
                    <t t-if="widget.view.is_action_enabled('delete')">
                        <li>
                            <a type="delete">Delete</a>
                        </li>
                    </t>
                    <!-- Color picker option: -->
                    <li>
                        <ul class="oe_kanban_colorpicker"
                            data-field="color"/>
                    </li>
                </ul>
            </div>
          
        # card类式加颜色    
            <field name="color" />   
            <div class="oe_kanban_card">
            <div t-attf-class="oe_kanban_card
                  #{kanban_color(record.color.raw_value)}">
                 
        # 为长文本加省略号
              <t t-esc="kanban_text_ellipsis(record.name.value, 32)" />
            过超32个字符就加... 不显示内容了
           
           
        # 自定义css    和javascript的资源
       
           <?xml version="1.0" encoding="utf-8"?>
            <openerp>
            <data>
                <template id="assets_backend"
                          inherit_id="web.assets_backend"
                          name="Todo Kanban Assets">
                    <xpath expr="." position="inside">
                        <link rel="stylesheet"
                              href="/todo_kanban/static/src/css/todo_kanban.css"
                        />
                        <script type="text/javascript"
                                src="/todo_kanban/static/src/js/todo_kanban.js">
                        </script>
                    </xpath>
                </template>
            </data>
            </openerp>
           
               
         # 调用其它模板
               采用t-call
               <template id="sub">
                <t t-esc="identifier" />
               </template>
               <template id="hello">
                <p>
                    hello,
                    <t t-call="module.sub">
                        <t t-set="identifier" t-value="name" />
                    </t>
                </p>
               </template>
          
         #字段渲染
               @http.route('hello/<model("res.users"):user')  # 给用户的id即可
               def hello(self,user,**kw)
                    return http.request.render('module.hello',{'user':user})
                -------
                <template id="hello">
                    <p t-field="user.display_name" />
                </template>
           ---------
         #可用字段选择修饰
               <template id="hello">
                    <p t-field="user.creat_date" />
                    <p t-field="user.creat_date"  t-filed-options='{"format":"long"}'/>
                    <p t-field="user.creat_date"  t-filed-options='{"format":"EEE"}'/>
                </template>
                -------------
                <template id="hello">
                    <p t-field="user.wealth" />
                    <p t-field="user.wealth"  t-filed-options='{
                         "widget":"monetary"
                         "display_currency":"user.company_id.currency_id"
                         }'/>
                </template>
                ------------
                <template id="hello">
                    <p t-field="user.create_date" t-field-options='{"widget":relative}}' />
                </template>
           
         #模板继承
                <template id="hello">
                    <p> Base template </p>
                </template>
                <template id="hello2" inherit_id="hello" name="Extender">
                    <xpath expr="//p" position="before">
                        <h1>Extended!</h1>
                    </xpath>   
                </template>
                 得到的结果:
                   <h1>Extended!</h1>
                   <p>Base template</p>
                --------------
                <template id="hello">
                    <p class="a">A</p>
                    <p class="b">B</p>           
                </template>
                <template id="hello2" inherit_id="hello" name="Extender">
                    <xpath expr="//p[hasclass('b')]" position="before">
                        <h1>Extended!</h1>
                    </xpath>   
                </template>   
                  得到的结果:
                   <p class="a">A</p>
                   <h1>Extended!</h1>
                   <p class="b">B</p>
                ----------
                调用系统的基础模板:
                  <template id="hello">
                   <t t-call="website.layout">
                        <p class="a">A</p>
                        <p class="b">B</p>   
                   </t>               
                </template>
                <template id="hello2" inherit_id="hello" name="Extender">
                    <xpath expr="//p[hasclass('b')]" position="before">
                        <h1>Extended!</h1>
                    </xpath>   
                </template>             
         #调试
           t-debug
            <t t-debug="pdb" />
            <=>
            importlib.import_module("pdb").set_trace()
           
         #python的请求模板
            response = http.request.render('my-template',{'context_value':99})
            用得是 http.request.render()方法
           
    *代码分析   
         #扫描枪的操作界面
         <openerp>
           <data>
            <template id="assets_backend" name="stock assets" inherit_id="web.assets_backend">
                <xpath expr="." position="inside">
                    <link rel="stylesheet" href="/stock/static/src/css/stock.css"/>
                    <script type="text/javascript" src="/stock/static/src/js/widgets.js"></script>
                </xpath>
            </template>    
            .....
         </data>
        <openerp>

  • 相关阅读:
    二分图最大匹配的K&#246;nig定理及其证明
    HDOJ 2389 Rain on your Parade
    HDOJ 1083 Courses
    HDOJ 2063 过山车
    POJ 1469 COURSES
    UESTC 1817 Complete Building the Houses
    POJ 3464 ACM Computer Factory
    POJ 1459 Power Network
    HDOJ 1532 Drainage Ditches
    HDU 1017 A Mathematical Curiosity
  • 原文地址:https://www.cnblogs.com/toby2chen/p/5198201.html
Copyright © 2011-2022 走看看