增加options属性将odoo的many2many_checkboxes改为多列显示

最近使用到odoo的原生many2many_checkboxes,但是发现一个问题,当候选项比较多的时候,他是单列显示，会把页面撑的很大，下面给出我的解决办法，在视图定义中,字段的option参数中添加col_count参数,修改addons/web/static/src/js/fields/路径中relational_fields.js文件的FieldMany2ManyCheckBoxes
仔细看FieldMany2ManyCheckBoxes中的函数就会发现,渲染候选项是在_renderCheckboxes函数中进行的,下面是我修改后的_renderCheckboxes函数:
视图定义如下:

 <field name="字段名" widget="many2many_checkboxes"
                                       options="{'no_create_edit': True,'no_open': True, 'no_create':True, 'col_count': 3}"/>

js文件修改如下:

_renderCheckboxes: function () {
        var self = this;
        if (this.attrs.options.col_count) {
            console.log(this.attrs.options.col_count)
            this.col_count_array = [...Array(this.attrs.options.col_count).keys()]
        }
        this.m2mValues = this.record.specialData[this.name];
        this.$el.html(qweb.render(this.template, {widget: this}));
        _.each(this.value.res_ids, function (id) {
            self.$('input[data-record-id="' + id + '"]').prop('checked', true);
        });
    },

接下来,修改对应的qweb模板,在odoo的addons/web/static/src/xml/base/xml 文件中搜索FieldMany2ManyCheckBoxes模板,修改结果如下:

<t t-name="FieldMany2ManyCheckBoxes">
    <div aria-atomic="true">
        <div t-if="widget.col_count_array">
            <div t-foreach="widget.col_count_array" t-as="col" t-attf-style="display:inline-block;vertical-align:top;">
                <div t-foreach="widget.m2mValues.slice(Math.ceil(widget.m2mValues.length/widget.attrs.options.col_count)*col, Math.ceil(widget.m2mValues.length/widget.attrs.options.col_count)*(col+1))" t-as="m2m_value">
                    <t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" t-att-id="id_for_label" class="custom-control-input" t-att-data-record-id="JSON.stringify(m2m_value[0])"/>
                        <label t-att-for="id_for_label" class="custom-control-label o_form_label"><t t-esc="m2m_value[1]"/>label>
                    div>
                div>
            div>
        div>
        <div t-else="">
            <div t-foreach="widget.m2mValues" t-as="m2m_value">
                <t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" t-att-id="id_for_label" class="custom-control-input" t-att-data-record-id="JSON.stringify(m2m_value[0])"/>
                    <label t-att-for="id_for_label" class="custom-control-label o_form_label"><t t-esc="m2m_value[1]"/>label>
                div>
            div>
        div>
    div>
t>```

我是直接在odoo源码中修改,如果想不破坏源码,可以通过继承的方式修改,只需要将qweb和js代码继承出来修改即可,这里不再展示继承方式的修改,可以参考之前之前的博客怎么继承修改js文件。或者博客留言询问