在一些项目中，我们需要根据需求定制页面，不能直接利用Odoo原生插件，这就需要我们自己依据Odoo框架设计插件达到想要的页面效果。
在之前的文章中，我们分享了如何创建Odoo tree视图，里面包含了各类操作，及固定表头和列。点击查看【Odoo 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 = $('<tr>')
.append(_.map(this.columns, this._renderHeaderCell.bind(this)));
if (this.hasSelectors) {
$tr.prepend(this._renderSelector('th'));
}
return $('<thead>').append($tr);
},
其中标注的代码为我们添加的部分，判断当前模型，符合条件则直接返回，那页面就不会出现表头，表尾方法类似，此处就不再赘述。当前效果如下图所示：
除了一些特定的字段类型外，常见的是针对普通字段的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;
});
<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>
新建的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>
在代码里也要注意适用对象是field还是view，二者实现方式不同。
后续发现在做好约定的情况下，可以直接在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;
}
}
