Odoo | 一个小技巧，隐藏列表表头~
17 2023-09-08
Odoo
神州数码云基地
在 Odoo 上的尝试、调研与分享
本期内容
Odoo隐藏列表表头
在一些项目中，我们需要根据需求定制页面，不能直接利用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);},
其中标注的代码为我们添加的部分，判断当前模型，符合条件则直接返回，那页面就不会出现表头，表尾方法类似，此处就不再赘述。当前效果如下图所示：
在普通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;});
"weekly_comments_ids" mode="tree" class="weekly_clear_border"> "bottom" js_class="remove_list_header"> "weekly_id" invisible="1"/> "weekly_review_reply" string='周报审阅人'/> "review_comments"/> "review_time" style="color: #a8b1bd;"/>"review_reply" string="回复" type="object" class="btn-blue"/>
注意事项
#1
新建的js文件需要在templates.xml文件中声明。
<template id="assets_end" inherit_id="web.assets_backend"> "." position="inside"> "/weekly/static/src/scss/weekly_view.scss" rel="stylesheet" type="text/scss"/> type="text/javascript"/> template>
#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; }}
本期内容就到这里啦
有更好的办法或疑问请
⬇欢迎加入社群一起讨论哦⬇
本期作者
数据开发工程师 查晶晶
更多精彩内容
了解云基地，就现在！
IT技术哪家强
神州数码最在行
行业新星，后起之秀
历史虽不长，但是实 力 强
15 
