扫码阅读

手机扫码阅读

Odoo | 一个小技巧，隐藏列表表头~

310 2023-09-08

表头 Odoo 视图 < fieldname=

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"/>

注意事项

新建的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>

在代码里也要注意适用对象是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; }}

本期内容就到这里啦

有更好的办法或疑问请

⬇欢迎加入社群一起讨论哦⬇

本期作者

数据开发工程师查晶晶

更多精彩内容

了解云基地，就现在！

IT技术哪家强

神州数码最在行

行业新星，后起之秀

历史虽不长，但是实力强

原文链接： http://mp.weixin.qq.com/s?__biz=Mzg5MzUyOTgwMQ==&mid=2247510438&idx=1&sn=4491dd40fb091e793f3a763ebfbb6afa&chksm=c02f9200f7581b16aaf277ecdcf69df7edf738498ad1edbd3060d3d4fe1a9703717543186917#rd