Odoo | 如何隐藏tree视图中的列表表头？

---

前言

在一些项目中，我们需要根据需求定制页面，不能直接利用Odoo原生插件，这就需要我们自己依据Odoo框架设计插件达到想要的页面效果。

在之前的文章中，我们分享了如何创建Odoo tree视图，里面包含了各类操作，及固定表头和列。点击查看【Odoo tree视图详解】

本期我们做个延申，来看看如何隐藏表格中的列表表头吧！

---

在one2many类型tree视图中的应用

以项目中遇到的实际问题为例，这里我们需要针对one2many字段类型的tree隐藏表头。

原系统页面样式以及odoo原生页面样式如下图所示：

我们需要对此表格样式进行改造，去掉表头表尾及框线样式。

根据页面调试可知：表格样式通过ListRenderer进行渲染。因此我们需要新建一个js继承ListRenderer。

分析原js代码可知，表头表尾分别通过_renderHeader、_renderFooter方法渲染。

因此我们需要重写这两种方法。新建文件weekly_list_renderer.js，部分代码如下：

ListRenderer.include({
    _renderHeader: function () {
//代码开始
    var self = this;
    //隐藏表头
    if (self.state.model === 'dc.weekly.review.comments' || self.state.model === 'dc.weekly.feedback'
        ||self.state.model === 'dc.weekly.check'){
     return;
    }
//代码结束
    var $tr = $('')
        .append(_.map(this.columns, this._renderHeaderCell.bind(this)));
    if (this.hasSelectors) {
        $tr.prepend(this._renderSelector('th'));
    }
    return $('').append($tr);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

其中标注的代码为我们添加的部分，判断当前模型，符合条件则直接返回，那页面就不会出现表头，表尾方法类似，此处就不再赘述。当前效果如下图所示：

---

在普通tree视图中的应用

除了一些特定的字段类型外，常见的是针对普通字段的tree视图隐藏列表表头。

针对这个部分，我们利用extend继承ListRenderer，重写_renderHeader方法令其直接返回。

调试之后发现方法可行！代码如下：

odoo.define('weekly.list.renderer', function (require) {
"use strict";
 
    var ListRenderer = require('web.ListRenderer');
    var viewRegistry = require('web.view_registry');
 
    const ListView = require('web.ListView');
 
    var WeeklyListRenderer = ListRenderer.extend({
        _renderHeader: function () {
          return
        },
    });
 
    var weeklyListView = ListView.extend({
        config: _.extend({}, ListView.prototype.config, {
            Renderer: WeeklyListRenderer,
        }),
    });
 
    viewRegistry.add('remove_list_header', weeklyListView)
    return weeklyListView;
 
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<field name="weekly_comments_ids" mode="tree" class="weekly_clear_border">
    <tree editable="bottom" js_class="remove_list_header">
        <field name="weekly_id" invisible="1"/>
        <field name="weekly_review_reply" string='周报审阅人'/>
        <field name="review_comments"/>
        <field name="review_time" style="color: #a8b1bd;"/>
        <button name="review_reply" string="回复" type="object" class="btn-blue"/>
    </tree>
</field>
1
2
3
4
5
6
7
8
9
10

---

注意事项

#1

新建的js文件需要在templates.xml文件中声明。

<odoo>
    <template id="assets_end" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <link href="/weekly/static/src/scss/weekly_view.scss" rel="stylesheet" type="text/scss"/>
            <script src="/weekly/static/src/js/weekly_list_renderer.js" type="text/javascript"/>
        </xpath>
    </template>
</odoo>
1
2
3
4
5
6
7
8

#2

在代码里也要注意适用对象是field还是view，二者实现方式不同。

#3

后续发现在做好约定的情况下，可以直接在scss文件里使用display: none方式达到以上效果。

但是有一弊端！如果后续其他列表字段名与data-name重复，那其他列表涉及同名的字段表头也会消失。

因此如果没有提前约定好，还是使用普通的方法吧~

具体实现代码如下：

.o_list_view {
    .o_list_table thead>tr>th[data-name='weekly_review_reply']{
        display: none;
    }
}
.o_list_view {
    .o_list_table thead>tr>th[data-name='review_comments']{
        display: none;
    }
}
.o_list_view {
    .o_list_table thead>tr>th[data-name='review_time']{
        display: none;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

本期内容就到这里啦！Odoo tree视图更详细的搭建方式和功能可以参考之前的文章：
【Odoo tree视图详解，读完这篇就够了】
【Odoo | 如何在多个tree里实现数据同步？】
还有更多的内容敬请期待哦！

版权声明：本文由神州数码云基地团队整理撰写，若转载请注明出处。
公众号搜索神州数码云基地，后台回复Odoo，加入Odoo技术交流群！