Как организовать много флажков в строки (строки), а не столбцы?

Question

Я создаю один модуль, в котором у меня есть поле Many2many, и я хотел бы преобразовать его в группу флажков. Я написал это в своем представлении XML для достижения этого

<field name="location_ids" widget="many2many_checkboxes"/>

Но в поле отображаются все опции в длинном столбце. Я хотел бы показать параметры в нескольких строках, как показано на следующем рисунке:

Answer 1

Если вы используете widget="radio", то мы можем сделать это в соответствии с вашими потребностями, указав options="{'horizontal': true}".Вы также можете использовать радио виджета на полях выбора.Таким образом, представление обновится следующим образом.

код:

<field name="sale_pricelist_setting" class="oe_inline" widget="radio" options="{'horizontal': true}"/>

До:

После горизонтального:

Answer 2

Я думаю, что нашел хороший подход для вас.

Исследование

Сначала я ищу оригинальный шаблон, который отображается с виджетом 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>

Template

Итак, я скопировал полученный HTML-код структуры group и соединил его с шаблоном виджета.

Вам необходимо создать 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 в шаблон выше. Вам нужно добавить атрибут this style="display: block;", чтобы сохранить положение в сетке справа.

<separator string="Field name" />
<field name="test_many2many_checkboxes"
        widget="many2many_checkboxes"
        nolabel="1"
        style="display: block;" />

Дайте мне знать, если это работает для вас. Я проверил с моим экземпляром Odoo 11, и он работает нормально. Это результат с двумя столбцами. Если вы хотите три столбца, вам нужно адаптировать шаблон:

Возможная альтернатива

Я проверил, как разработчики 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>

Answer 3

Для достижения вашего результата вам необходимо добавить собственный класс css в поле, как описано ниже.

<field name="location_ids widget="many2many_checkboxes" class="your_new_class"/>

Создать новый файл css и добавить следующий css.

.your_new_class  > div {
    float:left;
}

Объяснение:

Если вы определите widget = many2many_checkboxes в соответствии с каркасом, он создаст div для каждого возможного значения в dom.

Так что в качестве решения нам нужносоздайте новый класс CSS и примените его к полю и добавьте правильные свойства CSS для желаемого результата.

Надеюсь, это поможет вам.