如何在行(行)而不是列中组织 many2many 复选框?
How to organize many2many checkboxes in lines (rows) rather than columns?
我正在创建一个模块,其中有一个 Many2many
字段,我想将其转换为一个复选框组。我已经在 XML 实现它的观点中写了这个
<field name="location_ids" widget="many2many_checkboxes"/>
但是该字段在一长列中显示了所有选项。我想在多行中显示选项,如下图所示:
为了实现您的结果,您需要在字段上添加自定义 css class,如下所述。
<field name="location_ids widget="many2many_checkboxes" class="your_new_class"/>
创建一个新的 css 文件并添加以下内容 css。
.your_new_class > div {
float:left;
}
解释:
如果您根据框架定义 widget=many2many_checkboxes,它将为 dom.
中的每个可能值创建一个 div
因此,作为解决方案,我们需要创建一个新的 css class 并将其应用于字段,并为您想要的结果添加适当的 css 属性。
希望对您有所帮助。
如果您使用的是 widget="radio"
,那么我们可以根据您的需要提供 options="{'horizontal': true}"
。您也可以在选择字段上使用小部件收音机。所以视图将像这样更新。
代码:
<field name="sale_pricelist_setting" class="oe_inline" widget="radio" options="{'horizontal': true}"/>
之前:
水平后:
我想我找到了一个适合你的方法。
研究
首先我搜索了使用小部件 many2many_checkboxes
呈现的原始模板。这个:
<t t-name="FieldMany2ManyCheckBoxes">
<div t-foreach="widget.get('records')" t-as="record">
<div class="o_checkbox">
<input t-if="widget.get('value').indexOf(record[0]) !== -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])" checked="checked"/>
<input t-if="widget.get('value').indexOf(record[0]) === -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
<label class="o_form_label"><t t-esc="record[1]"/></label>
</div>
</t>
模板
因此,我复制了 group
结构的结果 html 代码,并将其与小部件的模板结合在一起。
您需要使用此内容创建一个 xml 文件并将其添加到您的 __manifes__.py
文件中:
'qweb': ['static/src/xml/many2many_checkboxes.xml', ]
代码many2many_checkboxes.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-extend="FieldMany2ManyCheckBoxes">
<t t-jquery="div:first" t-operation="replace">
<div class="o_group">
<table class="o_group o_inner_group o_group_col_6">
<tbody>
<t t-foreach="widget.m2mValues" t-as="record">
<t t-if="record_parity == 'odd'">
<t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
<tr>
<td colspan="1" class="o_td_label">
<label t-att-for="id_for_label" class="o_form_label"><t t-esc="record[1]"/></label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input type="checkbox" t-att-id="id_for_label" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
<table class="o_group o_inner_group o_group_col_6 pull-right">
<tbody>
<t t-foreach="widget.m2mValues" t-as="record">
<t t-if="record_parity == 'even'">
<t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
<tr>
<td colspan="1" class="o_td_label">
<label t-att-for="id_for_label" class="o_form_label"><t t-esc="record[1]"/></label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input type="checkbox" t-att-id="id_for_label" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
</div>
</t>
</t>
</templates>
表格
最后在表单中添加字段。但是没有 group
元素,因为我们已经在上面的模板中添加了 group
html 元素。您需要添加此属性 style="display: block;"
以保持网格中的位置正确。
<separator string="Field name" />
<field name="test_many2many_checkboxes"
widget="many2many_checkboxes"
nolabel="1"
style="display: block;" />
让我知道这是否适合您。我已经用我的 Odoo 11 实例进行了测试,它运行良好。这是两列的结果。如果您想要三列,则需要调整模板:
可能的选择
我查看了 Odoo 开发人员是如何在 "Technical Settings" 上完成 table 的。他们正在创建一个 table 而不是像我一样创建两个。所以也许有更好的方法来做到这一点,因为我需要遍历所有记录两次来构建两个 tables.
无论如何你可以自由地改进我的代码。我只想引导您找到解决方案。也许您可以将记录分成三组来构建行。
Odoo 10
版本10模板略有改动,需要改用此模板:
<t t-extend="FieldMany2ManyCheckBoxes">
<t t-jquery="div:first" t-operation="replace">
<div class="o_group">
<table class="o_group o_inner_group o_group_col_6">
<tbody>
<t t-foreach="widget.get('records')" t-as="record">
<t t-if="record_parity == 'odd'">
<tr>
<td colspan="1" class="o_td_label">
<label for="o_field_input_28" class="o_form_label" data-original-title="" title="">
<span t-esc="record[1]"/>
</label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input t-if="widget.get('value').indexOf(record[0]) !== -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])" checked="checked"/>
<input t-if="widget.get('value').indexOf(record[0]) === -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
<table class="o_group o_inner_group o_group_col_6 pull-right">
<tbody>
<t t-foreach="widget.get('records')" t-as="record">
<t t-if="record_parity == 'even'">
<tr>
<td colspan="1" class="o_td_label">
<label for="o_field_input_28" class="o_form_label" data-original-title="" title="">
<span t-esc="record[1]"/>
</label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input t-if="widget.get('value').indexOf(record[0]) !== -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])" checked="checked"/>
<input t-if="widget.get('value').indexOf(record[0]) === -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
</div>
</t>
</t>
我正在创建一个模块,其中有一个 Many2many
字段,我想将其转换为一个复选框组。我已经在 XML 实现它的观点中写了这个
<field name="location_ids" widget="many2many_checkboxes"/>
但是该字段在一长列中显示了所有选项。我想在多行中显示选项,如下图所示:
为了实现您的结果,您需要在字段上添加自定义 css class,如下所述。
<field name="location_ids widget="many2many_checkboxes" class="your_new_class"/>
创建一个新的 css 文件并添加以下内容 css。
.your_new_class > div {
float:left;
}
解释:
如果您根据框架定义 widget=many2many_checkboxes,它将为 dom.
中的每个可能值创建一个 div因此,作为解决方案,我们需要创建一个新的 css class 并将其应用于字段,并为您想要的结果添加适当的 css 属性。
希望对您有所帮助。
如果您使用的是 widget="radio"
,那么我们可以根据您的需要提供 options="{'horizontal': true}"
。您也可以在选择字段上使用小部件收音机。所以视图将像这样更新。
代码:
<field name="sale_pricelist_setting" class="oe_inline" widget="radio" options="{'horizontal': true}"/>
之前:
水平后:
我想我找到了一个适合你的方法。
研究
首先我搜索了使用小部件 many2many_checkboxes
呈现的原始模板。这个:
<t t-name="FieldMany2ManyCheckBoxes">
<div t-foreach="widget.get('records')" t-as="record">
<div class="o_checkbox">
<input t-if="widget.get('value').indexOf(record[0]) !== -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])" checked="checked"/>
<input t-if="widget.get('value').indexOf(record[0]) === -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
<label class="o_form_label"><t t-esc="record[1]"/></label>
</div>
</t>
模板
因此,我复制了 group
结构的结果 html 代码,并将其与小部件的模板结合在一起。
您需要使用此内容创建一个 xml 文件并将其添加到您的 __manifes__.py
文件中:
'qweb': ['static/src/xml/many2many_checkboxes.xml', ]
代码many2many_checkboxes.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-extend="FieldMany2ManyCheckBoxes">
<t t-jquery="div:first" t-operation="replace">
<div class="o_group">
<table class="o_group o_inner_group o_group_col_6">
<tbody>
<t t-foreach="widget.m2mValues" t-as="record">
<t t-if="record_parity == 'odd'">
<t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
<tr>
<td colspan="1" class="o_td_label">
<label t-att-for="id_for_label" class="o_form_label"><t t-esc="record[1]"/></label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input type="checkbox" t-att-id="id_for_label" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
<table class="o_group o_inner_group o_group_col_6 pull-right">
<tbody>
<t t-foreach="widget.m2mValues" t-as="record">
<t t-if="record_parity == 'even'">
<t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
<tr>
<td colspan="1" class="o_td_label">
<label t-att-for="id_for_label" class="o_form_label"><t t-esc="record[1]"/></label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input type="checkbox" t-att-id="id_for_label" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
</div>
</t>
</t>
</templates>
表格
最后在表单中添加字段。但是没有 group
元素,因为我们已经在上面的模板中添加了 group
html 元素。您需要添加此属性 style="display: block;"
以保持网格中的位置正确。
<separator string="Field name" />
<field name="test_many2many_checkboxes"
widget="many2many_checkboxes"
nolabel="1"
style="display: block;" />
让我知道这是否适合您。我已经用我的 Odoo 11 实例进行了测试,它运行良好。这是两列的结果。如果您想要三列,则需要调整模板:
可能的选择
我查看了 Odoo 开发人员是如何在 "Technical Settings" 上完成 table 的。他们正在创建一个 table 而不是像我一样创建两个。所以也许有更好的方法来做到这一点,因为我需要遍历所有记录两次来构建两个 tables.
无论如何你可以自由地改进我的代码。我只想引导您找到解决方案。也许您可以将记录分成三组来构建行。
Odoo 10
版本10模板略有改动,需要改用此模板:
<t t-extend="FieldMany2ManyCheckBoxes">
<t t-jquery="div:first" t-operation="replace">
<div class="o_group">
<table class="o_group o_inner_group o_group_col_6">
<tbody>
<t t-foreach="widget.get('records')" t-as="record">
<t t-if="record_parity == 'odd'">
<tr>
<td colspan="1" class="o_td_label">
<label for="o_field_input_28" class="o_form_label" data-original-title="" title="">
<span t-esc="record[1]"/>
</label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input t-if="widget.get('value').indexOf(record[0]) !== -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])" checked="checked"/>
<input t-if="widget.get('value').indexOf(record[0]) === -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
<table class="o_group o_inner_group o_group_col_6 pull-right">
<tbody>
<t t-foreach="widget.get('records')" t-as="record">
<t t-if="record_parity == 'even'">
<tr>
<td colspan="1" class="o_td_label">
<label for="o_field_input_28" class="o_form_label" data-original-title="" title="">
<span t-esc="record[1]"/>
</label>
</td>
<td colspan="1" style="width: 50%;">
<div class="o_checkbox o_form_field_boolean o_form_field">
<div class="o_checkbox">
<input t-if="widget.get('value').indexOf(record[0]) !== -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])" checked="checked"/>
<input t-if="widget.get('value').indexOf(record[0]) === -1" type="checkbox" t-att-data-record-id="JSON.stringify(record[0])"/>
<span/>
</div>
</div>
</td>
</tr>
</t>
</t>
</tbody>
</table>
</div>
</t>
</t>