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

向右看齐 2023-10-02 00:30 23阅读 0赞

#### 目录 ####

*  前言
 *  在one2many类型tree视图中的应用
 *  在普通tree视图中的应用
 *  注意事项

--------------------

## 前言 ##

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

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

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

--------------------

## 在one2many类型tree视图中的应用 ##

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

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

![图片][d617612a01c7a4eb3ae446b1617ebb1a.png]

![图片][c023ff346e676f2c23f2db693df0a8a3.png]

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

根据页面调试可知：表格样式通过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 = $('<tr>')
            .append(_.map(this.columns, this._renderHeaderCell.bind(this)));
        if (this.hasSelectors) {
        
            $tr.prepend(this._renderSelector('th'));
        }
        return $('<thead>').append($tr);
    },

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

![图片][2e649f926898d81bd94df78b3464b56b.png]

--------------------

## 在普通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**

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

**\#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;
        }
    }

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

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

[Odoo tree]: https://blog.csdn.net/CBGCampus/article/details/125095633
[d617612a01c7a4eb3ae446b1617ebb1a.png]: https://img-blog.csdnimg.cn/img_convert/d617612a01c7a4eb3ae446b1617ebb1a.png
[c023ff346e676f2c23f2db693df0a8a3.png]: https://img-blog.csdnimg.cn/img_convert/c023ff346e676f2c23f2db693df0a8a3.png
[2e649f926898d81bd94df78b3464b56b.png]: https://img-blog.csdnimg.cn/img_convert/2e649f926898d81bd94df78b3464b56b.png
[Odoo _ _tree]: https://editor.csdn.net/md/?articleId=126718233