Odoo Tree视图详解，读完这篇就够了

今天药忘吃喽~ 2023-10-01 22:02 22阅读 0赞

### 一、前言 ###

对于Odoo初学者而言，Tree视图是我们应该首先掌握的基础视图。  
这篇文章包含对Tree视图的基本介绍、视图顶部增加按钮、绑定widget、单元格合并、searchBar和action按钮的隐藏、固定首行首列，视图内部增加按钮等~

相信看完这篇文章后，你会更加了解Tree视图，快速解决日常开发所需！

### *二、Odoo Tree视图介绍* ###

在实际开发中我们不可避免的会用到列表展示数据。

那在Odoo中已经为我们集成好了**Tree视图**，我们只需要通过固有的写法定义字段，就能完成列表的数据展示。

**我们来看看它有哪些具体写法和属性吧：**

**1、editable**

该属性让数据可以在列表内进行编辑，有效的值是top和bottom。

**2、default\_order**

进行初始化排序，可使用desc来进行倒序。

**3、decoration-样式名**

样式可为：**bf加粗, it斜体。或其他bootstrap样式，如：danger红色, info, muted, primary, success绿色,warning橙色等等,值为python表达式**。对每条记录执行相应表达式判断，当结果为true的时候将对应的样式应用。

**4、create, edit**

可以通过将它们设置为false来禁用视图中的对应操作按钮：create对应创建按钮、edit对应编辑按钮。

### 二、Odoo Tree视图增加按钮 ###

***1、创建一个tree视图***

<record id="dispatch_imitate_list_view" model="ir.ui.view">
        <field name="name">order.dispatch.imitate</field>
        <field name="model">order.dispatch.imitate</field>
        <field name="arch" type="xml">
            <tree create="false" import="false" editable="top" class="order_dispatch_list">
                <field name="imitate_name" readonly="1"/>
                <field name="imitate_note" />
                <field name="create_uid" string="创建人" readonly="1"/>
                <field name="create_date" string="创建时间" readonly="1"/>
            </tree>
        </field>
    </record>

***2、为该视图创建一个按钮***

<?xml version="1.0" encoding="utf-8" ?>
    <template id="create_imitate" xml:space="preserve">
        <t t-extend="ListView.buttons">
            <t t-jquery="div.o_list_buttons" t-operation="append">
                <t t-if="widget.actionViews[0].fieldsView.name == 'order.dispatch.imitate'">
                    <button class="btn btn-primary create_imitate_button" type="button">创建模拟</button>
                </t>
            </t>
        </t>
    </template>

***3、扩展ListController***  
（实现该按钮方法，并绑定到Tree视图）

***Step4：绑定注册名***

（将此时注册名绑定到tree视图的js\_class属性中）

<record id="dispatch_imitate_list_view" model="ir.ui.view">
        <field name="name">order.dispatch.imitate</field>
        <field name="model">order.dispatch.imitate</field>
        <field name="arch" type="xml">
            <tree js_class="imitate_list_view_button" create="false" import="false" editable="top" class="order_dispatch_list">
                <field name="imitate_name" readonly="1"/>
                <field name="imitate_note" />
                <field name="create_uid" string="创建人" readonly="1"/>
                <field name="create_date" string="创建时间" readonly="1"/>
            </tree>
        </field>
    </record>

***Step5：页面效果，按钮事件生效***

![图片][cbf475060acdbd6a47d15ff469b5ff2e.png]

### *三、Odoo* *Tree视图单元格合并* ###

在日常开发中，table表格的单元格合并是个很常见的场景。

一般在vue+elementUI中，可以配置row和column，从而实现单元格的合并，然而在Odoo Tree视图中，是无法通过配置来实现相关场景的。

**那我们该如何处理呢？实际场景如下：**

![图片][415e184fa5118d688ed80536ea954bf5.png]

Odoo的Tree视图通过加载list\_renderer.js文件来完成单元格渲染。

也就是说，我们可以通过修改具体的renderder方法进而实现单元格的合并。

**方法如下：**

***1、*** ***确保合并条数和合并数据的处理***

首先保证后台返回的数据中，有明确的合并条数字段。

![图片][2a17e0ab77867ab5eb5c45605a58ebaf.png]

然后需要前端对返回数据进行一定标识处理，改写\_renderRows方法，为后面合并单元格做准备：

var orderListRenderer = ListRenderer.extend({
        
        _renderRows: function () {
        
            //对data数据进行处理
            if (this.state.data.length > 0) {
        
                // var crm_no = this.state.data[0].data.crm_no
                var id = this.state.data[0].data.id
                var quot_no = this.state.data[0].data.quot_no
                this.state.data[0].data.first_flag = true
                for (let item of this.state.data) {
        
                    if (item.data.quot_no !== quot_no) {
        
                        item.data.first_flag = true
                        quot_no = item.data.quot_no
                    }
                }
     
            }
            return this.state.data.map(this._renderRow.bind(this));
        }
    )

***2、*** ***改写单元格的渲染方法*\*\*\*\**\_renderBodyCell***

***3、*** ***勾选框渲染改写\_renderRow和\_renderSelector***

_renderRow: function (record) {
        
        var self = this;
        var $cells = this.columns.map(function (node, index) {
        
            return self._renderBodyCell(record, node, index, {
        mode: 'readonly'});
        });
     
        var $tr = $('<tr/>', {
        class: 'o_data_row'}).attr('data-id', record.id).append($cells);
        if (this.hasSelectors) {
        
            //增加record.data参数,便于渲染勾选列
            $tr.prepend(this._renderSelector('td', !record.res_id, record.data));
        }
        this._setDecorationClasses($tr, this.rowDecorations, record);
        return $tr;
        },
    _renderSelector: function (tag, disableInput, data) {
        
        var $content = dom.renderCheckbox();
        if (disableInput) {
        
            $content.find("input[type='checkbox']").prop('disabled', disableInput);
        }
        if (data) {
        
            if (data.first_flag != undefined) {
        //对于同一将合并单元格的勾选按钮，只渲染第一次，其他勾选按钮不渲染
                 return $('<' + tag + '>').addClass('o_list_record_selector').attr('rowSpan', Number(data.prod_length)).css({
        'vertical-align': 'middle'}).append($content);
            } else {
        
                 return
        } else {
        
            return $('<' + tag + '>').addClass('o_list_record_selector').css({
        'vertical-align': 'middle'}).append($content);
        }
    }

***4、*** ***将改写的ListRenderer挂载到ListView上***

***5、*** ***将此view挂载到tree视图上***

***6、*** ***更新模块便可实现单元格合并了！***

### *四、Odoo\_\_Tree视图绑定widget* ###

***1、*** ***继承web.basic\_fields并编写widget***

***2、*** ***对需要绑定widget的字段，在tree视图中进行绑定***

<record id="dispatch_imitate_list_view" model="ir.ui.view">
        <field name="name">order.dispatch.imitate</field>
        <field name="model">order.dispatch.imitate</field>
        <field name="arch" type="xml">
            <tree js_class="imitate_list_view_button" create="false" import="false" editable="top" class="order_dispatch_list">
                <field name="imitate_name" readonly="1" widget="imitate_fields"/>
                <field name="imitate_note" />
                <field name="create_uid" string="创建人" readonly="1"/>
                <field name="create_date" string="创建时间" readonly="1"/>
            </tree>
        </field>
    </record>

### *五、隐藏searchBar、* *action和勾选栏* ###

***1、 隐藏searchBar、action***

在上面，我们已经知道了tree视图如何绑定js\_class。这里，我们可以对ListView进行searchBar和action的配置，进行隐藏。

***2、 隐藏勾选框***

tree视图的勾选框是在列表render的时候进行渲染的，所以我们得改写ListRender里的\_renderSelector方法

***3、 页面实图***

![图片][11ba0427e2322cd02d4682e3d2eade00.png]

### *六、Odoo Tree视图单元格内添加操作按钮视* ###

***1、*** ***我们对该模型py文件添加html类型的字段，并用compute属性计算***

class OrderDispatchImitate(models.Model):
        _name = "order.dispatch.imitate"
        _description = "齐套模拟基本模型"
     
        imitate_name = fields.Char(string="模拟名称")
        imitate_note = fields.Char(string="备注")
        project_id = fields.One2many("order.dispatch.imitate.project", "dispatch_imitate_id", "齐套模拟项目id")
        button_view = fields.Html('操作', compute="_button_html_view", sanitize=False)
     
        @api.model
        def _button_html_view(self):
            self.button_view = '<button type="button" name="confirm" class="btn-primary btn_radius o_list_button_edit">编辑</button>'

***2、*** ***在tree视图中新增该字段***

<record id="dispatch_imitate_list_view" model="ir.ui.view">
        <field name="name">order.dispatch.imitate</field>
        <field name="model">order.dispatch.imitate</field>
        <field name="arch" type="xml">
            <tree js_class="imitate_list_view_button" create="false" import="false" editable="top" class="order_dispatch_list">
                <field name="button_view" type="html" readonly="1"/>
                <field name="imitate_name" readonly="1" widget="imitate_fields"/>
                <field name="imitate_note" />
                <field name="create_uid" string="创建人" readonly="1"/>
                <field name="create_date" string="创建时间" readonly="1"/>
            </tree>
        </field>
    </record>

***3、*** **页面实图，我们也可以像上面一样对button\_view字段绑定widget，从而实现按钮点击事件**

![图片][81848d8268663d0996d3e22da111e056.png]

### *七、Odoo Tree视图固定表头和列* ###

在实际业务场景中难免会碰到Tree视图里面字段数过多，主要字段和操作列大都集中在前几列的情况。

**那么在tree视图横向滑动的时候，前几列就会隐藏。**

Tree视图上如何固定表头和列呢？不需要在应用商店单独下载模块，几行css就可以实现以下功能~

***1、*** ***给需要固定表头的Tree视图定义class这样我们在元素中获取到该DOM***

<record id="materiel_tree_view" model="ir.ui.view">
        <field name="name">materiel</field>
        <field name="model">materiel</field>
        <field name="arch" type="xml">
            <tree create="false" js_class="material_button" class="materiel_tree material_table" editable="top" limit="50">
                <field name="button_view" type="html" widget="material_operate"/>
                <field name="prod_line1" />
                <field name="prod_line2" />
                ......

***2、*** ***设置表头样式+背景色***

// Sticky Header & Footer in List View
    .material_table {
        
      .table-responsive {
        
        .o_list_table {
        
          td:first-child, th:first-child {
        
              position:sticky;
              left:0; /* 首行永远固定在左侧 */
              z-index:1;
              background-color:$o-list-footer-bg-color;
          }
          thead tr th {
        
              position:sticky !important;
              top:0; /* 列首永远固定在头部  */
          }
          th:first-child{
        
              z-index:2;
              background-color:$o-list-footer-bg-color;
          }
     
          thead tr:nth-child(1) th {
        
              background-color: $o-list-footer-bg-color;
          }
          thead tr th:nth-child(2)  {
        
              z-index:2;
              left:40px;
              background-color: $o-list-footer-bg-color;
          }
     
          tbody tr td:nth-child(2)  {
        
              position:sticky;
              z-index:1;
              left:40px;
              background-color: $o-list-footer-bg-color;
          }
          tfoot,
          tfoot tr:nth-child(1) td {
        
            position: sticky;
            bottom: 0;
          }
          tfoot tr:nth-child(1) td {
        
            background-color: $o-list-footer-bg-color;
          }
        }
      }
    }

***3、*** ***看看实际效果***

先是纵向滚动，表头始终固定在第一行

![图片][030705b7ab8e3169db75b5172719f2f6.png]

然后是横向滚动，操作列首列始终固定在第一列

![图片][1f3fe85e9debef00976586d7f6483e19.png]

**以上就是Odoo Tree视图的具体构建方法，是不是感觉并没有想象的复杂呢~**

**话不多说，赶快动手试试吧！**

公众号搜索神州数码云基地，后台回复Odoo，加入Odoo技术交流群！

[cbf475060acdbd6a47d15ff469b5ff2e.png]: https://img-blog.csdnimg.cn/img_convert/cbf475060acdbd6a47d15ff469b5ff2e.png
[415e184fa5118d688ed80536ea954bf5.png]: https://img-blog.csdnimg.cn/img_convert/415e184fa5118d688ed80536ea954bf5.png
[2a17e0ab77867ab5eb5c45605a58ebaf.png]: https://img-blog.csdnimg.cn/img_convert/2a17e0ab77867ab5eb5c45605a58ebaf.png
[11ba0427e2322cd02d4682e3d2eade00.png]: https://img-blog.csdnimg.cn/img_convert/11ba0427e2322cd02d4682e3d2eade00.png
[81848d8268663d0996d3e22da111e056.png]: https://img-blog.csdnimg.cn/img_convert/81848d8268663d0996d3e22da111e056.png
[030705b7ab8e3169db75b5172719f2f6.png]: https://img-blog.csdnimg.cn/img_convert/030705b7ab8e3169db75b5172719f2f6.png
[1f3fe85e9debef00976586d7f6483e19.png]: https://img-blog.csdnimg.cn/img_convert/1f3fe85e9debef00976586d7f6483e19.png