Odoo14前端框架之在Tree视图添加自定义小标记
前言
在开发Odoo时,有时候需要修改前端显示的页面内容。我现在在做的项目有个需求是在Odoo中新建一条数据时,需要在Tree视图中将其标记为新建数据,标记的时间范围是24小时内为新建数据。具体实现效果看图。
具体实现思路是,查看Odoo渲染Tree视图的JS,然后继承过来添加自己的内容进去。时间上的判断使用的是Odoo创建模型时自动创建的create_date字段,然后这个字段需要在Tree视图上写出来,可以根据需求隐藏。
提示:以下是本篇文章正文内容,下面案例可供参考
JS代码
console.log('list_view.js');
odoo.define('new_tag_in_tree.ListNumber', function (require) {
"use strict";
var core = require('web.core');
var ListRenderer = require('web.ListRenderer');
var _t = core._t;
ListRenderer.include({
_getNumberOfCols: function () {
var columns = this._super();
console.log('_getNumberOfCols');
columns +=1;
return columns;
},
_renderFooter: function (isGrouped) {
console.log('_renderFooter');
var $footer = this._super(isGrouped);
$footer.find("tr").prepend($('<td>'));
return $footer;
},
_renderGroupRow: function (group, groupLevel) {
var $row = this._super(group, groupLevel);
console.log('_renderGroupRow');
if (this.mode !== 'edit' || this.hasSelectors){
$row.find("th.o_group_name").after($('<td>'));
}
return $row;
},
_renderGroups: function (data, groupLevel) {
var self = this;
var _self = this;
console.log('_renderGroups');
groupLevel = groupLevel || 0;
var result = [];
var $tbody = $('<tbody>');
_.each(data, function (group) {
console.log('tbody');
if (!$tbody) {
$tbody = $('<tbody>');
}
$tbody.append(self._renderGroupRow(group, groupLevel));
if (group.data.length) {
result.push($tbody);
// render an opened group
if (group.groupedBy.length) {
// the opened group contains subgroups
result = result.concat(self._renderGroups(group.data, groupLevel + 1));
} else {
// the opened group contains records
var $records = _.map(group.data, function (record,index) {
//Nilesh
if (_self.mode !== 'edit' || _self.hasSelectors){
return self._renderRow(record).prepend("<td class='o_list_record_selector'><img class='new_tag' src='/new_tag_in_tree/static/src/img/new.gif' /></td>");
}
else{
return self._renderRow(record);
}
});
result.push($('<tbody>').append($records));
}
$tbody = null;
}
});
if ($tbody) {
result.push($tbody);
}
return result;
},
_renderHeader: function (isGrouped) {
console.log('_renderHeader');
var $header = this._super(isGrouped);
if (this.hasSelectors) {
$header.find("th.o_list_record_selector").before($('<th class="o_list_row_number_header o_list_row_count_sheliya">').html(' '));
var advance_search = $header.find("tr.advance_search_row")
if(advance_search.length && advance_search.find('td.o_list_row_number_header').length==0){
advance_search.prepend($('<td class="o_list_row_number_header">').html(' '));
}
}
else{
if (this.mode !== 'edit'){
$header.find("tr").prepend($("<th class='o_list_row_number_header o_list_row_count_sheliya'>").html(' '));
}
}
//$header.find("tr").prepend($('<th>').html('#'));
return $header;
},
_renderRow: function (record) {
console.log('_renderRow');
// console.log(record.data.create_date);
// console.log(this.mode)
var today = new Date();
var $row = this._super(record);
if (this.mode !== 'edit' && this.state.groupedBy.length==0){
var index = this.state.data.findIndex(function(e){return record.id===e.id})
if(record.data.create_date == undefined || today - new Date(record.data.create_date) > 86400000){
console.log('超过一天或create_date不存在');
if (index!==-1){
$row.prepend("<td class='o_list_record_selector'><img class='new_tag' src='' /></td>");
}
}else{
console.log('未超过一天')
if (index!==-1){
$row.prepend("<td class='o_list_record_selector'><img class='new_tag' src='/new_tag_in_tree/static/src/img/new.gif' /></td>");
}
}
}
return $row;
},
});
});
可以看到,大部分都是Odoo里web.ListRenderer的代码,我们主要改的是渲染行的_renderRow方法。
优化一下显示效果
.o_list_row_count_sheliya {
width: 20px;
padding-left: 10px !important;
text-align: center;
}
.o_list_view .o_list_table .o_list_record_selector {
width: 30px !important;
padding-left: 0.3rem !important;
}
引入资源到Odoo
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template id="assets_backend" name="rowno_in_tree assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/new_tag_in_tree/static/src/scss/list_view.scss" />
<script type="text/javascript" src="/new_tag_in_tree/static/src/js/list_view.js"></script>
</xpath>
</template>
</data>
</odoo>