關於QWeb模板繼承20170419

官方關於QWeb模板繼承的說明

template inheritance

Template inheritance is used to alter existing templates in-place, e.g. to add information to templates created by an other modules.

Template inheritance is performed via the t-extend directive which takes the name of the template to alter as parameter.

The alteration is then performed with any number of t-jquery sub-directives:

<t t-extend="base.template">
    <t t-jquery="ul" t-operation="append">
        <li>new element</li>
    </t>
</t>

The t-jquery directives takes a CSS selector. This selector is used on the extended template to select context nodes to which the specified t-operation is applied:

append

the node's body is appended at the end of the context node (after the context node's last child)

prepend

the node's body is prepended to the context node (inserted before the context node's first child)

before

the node's body is inserted right before the context node

after

the node's body is inserted right after the context node

inner

the node's body replaces the context node's children

replace

the node's body is used to replace the context node itself

No operation

if no t-operation is specified, the template body is interpreted as javascript code and executed with the context node as this

原XML文件（picking.xml 部分）

<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">
<t t-name='PickingEditorWidget'>
<td class="brctbl-col5 js_loc"> <t t-esc="row.cols.dest" />
<div class="pull-right btn-group">
<button type="button" class="btn btn-default dropdown-toggle fa fa-cog" data-toggle="dropdown">
 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<t t-if="row.cols.product_id">
<li><a class="js_create_lot" href="#">Create / Change Lot</a></li>
</t>
<t t-if="!row.cols.head_container && !row.cols.container">
<li><a class="js_change_src" href="#">Change source location</a></li>
<li><a class="js_change_dst" href="#">Change destination location</a></li>
</t>
<t t-if="row.cols.head_container">
<li><a class="js_pack_change_dst" href="#">Change destination location</a></li>
<li class="divider"></li>
<li><a class="js_pack_configure" href="#">Configure package</a></li>
<li><a class="js_delete_pack" href="#">Remove from package</a></li>
<li><a class="js_print_pack" href="#">Print package label</a></li>
</t>
</ul>
</div>
</td>
</t>
</templates>

如果要在css樣式爲brctbl-col5 的<td> 後面增加1個<td>

創建picking.xml文件，寫法：

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-extend="PickingEditorWidget">
        <t t-jquery=".brctbl-col5" t-operation="after">
            <td>
                <t t-if="row.cols.head_container">
                    <select id="js_loc_select2" class="form-control pack">
                        <option class="js_loc_option" data-loc-id="false">更改目標位置...</option>
                        <t t-foreach="widget.get_location()" t-as="loc">
                            <option class="js_loc_option" t-att-data-loc-id="loc.id"><t t-esc="loc.name"/></option>
                        </t>
                    </select>
                </t>
                <t t-if="!row.cols.head_container &amp;&amp; !row.cols.container">
                    <select id="js_loc_select2" class="form-control">
                        <option class="js_loc_option" data-loc-id="false">更改目標位置...</option>
                        <t t-foreach="widget.get_location()" t-as="loc">
                            <option class="js_loc_option" t-att-data-loc-id="loc.id"><t t-esc="loc.name"/></option>
                        </t>
                    </select>
                </t>
            </td>
        </t>
    </t>
</templates>

-------------------------------------------------------------------------------------------------------------------------