目标要求:在系统的创建按钮旁边增加新的按钮实现自定义的功能
image.png
一 新增一个按钮
odoo的前端都是qweb渲染的,找到创建的按钮的模板位置,我们在后面加上一个按钮标签即可
- 按钮模板所在位置:odoo/addons/web/static/src/xml/base.xml
<t t-name="ListView.buttons">
<t t-if="!widget.no_leaf and widget.options.action_buttons !== false">
<div class="o_list_buttons">
<t t-if="widget.options.addable and widget.is_action_enabled('create')">
<button type="button" class="btn btn-primary btn-sm o_list_button_add" accesskey="c">
<t t-esc="widget.options.addable"/>
</button>
</t>
<button type="button" class="btn btn-primary btn-sm o_list_button_save" accesskey="s">
Save
</button>
<button type="button" class="btn btn-default btn-sm o_list_button_discard" accesskey="j">
Discard
</button>
</div>
</t>
</t>
- 我们需要在这个ListView.buttons中增加一个button标签,为了不改动源码我们通过继承增加,新建一个
add_button.xml
这个文件需要在__manifest__.py文件'qweb'中引入才会进行加载
'qweb': ['static/src/xml/add_button.xml']
<?xml version="1.0" encoding="UTF-8"?>
<template xml:space="preserve">
<!-- 继承ListView.buttons模板-->
<t t-extend="ListView.buttons">
<!-- 在 button.o_list_button_discard 标签之后增加 -->
<t t-jquery="button.o_list_button_discard" t-operation="after">
<!-- 通过'add_new'进行判断什么时候显示按钮,如果不加这个t-if判断,那么所有的tree视图都将出现这个新按钮-->
<t t-if="widget.options.addable and widget.is_action_enabled('add_new')">
<!-- button标签,记得加上一个'oe_list_button_news'自定义的类用于js定位绑定动作-->
<button class="btn btn-primary btn-sm oe_list_button_news" type="button">新按钮</button>
</t>
</t>
</t>
</template>
二 在JS中进行对按钮显示的判断及按钮动作绑定
- 新建文件
tree_button_action.js
odoo.define('tree_button.button_action', function (require) {
"use strict";
var View = require('web.View');
var Model = require('web.Model');
var ListView = require('web.ListView');
ListView.include({
render_buttons: function ($node) {
this._super.apply(this, arguments);
if (this.$buttons) {
// 通过属性名绑定动作
this.$buttons.find('.oe_list_button_news').click(this.proxy('new_action_2'));
}
},
// 可以直接调用模型方法
new_action_1: function () {
var self = this
var tree_button = new Model("tree.button");
tree_button.call("func").then(function (result) {
console.log(result);
});
},
// 也可以调出模型视图,比如打开一个向导视图,action参数于python中一致
new_action_2:function () {
var self = this;
this.do_action({
name: "列表视图",
res_model: "tree.button",
// 注意tree视图类型在js中使用'list'
// views: [[false, 'list'], [false, 'form']],
views: [[false, 'form']],
type: 'ir.actions.act_window',
target: "new",
context: self.dataset.get_context(),
flags: {
action_buttons: false,
}
});
},
})
View.include({
// 判断按钮是否显示
is_action_enabled: function (action) {
// 这里'add_new'与add_button.xml中widget.is_action_enabled('add_new')对应
if (action == "add_new") {
var attrs = this.fields_view.arch.attrs;
return (action in attrs) ? JSON.parse(attrs[action]) : false;
} else {
return this._super.apply(this, arguments);
}
}
})
})
- 记得需要加载这个js才会生效,新建一个
render_js.xml文件,且这个xml文件需要在_manifest中data 引入
<?xml version="1.0"?>
<odoo>
<data>
<template id="tree_button_render_js" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<!-- js文件地址按实际填写-->
<script src="tree_button/static/src/js/tree_button_action.js" type="text/javascript"/>
</xpath>
</template>
</data>
</odoo>
三 显示按钮
在JS代码中设置按钮默认不显示,在需要显示的模型上设置属性为true即可显示
<!--tree_button视图-->
<record id="tree_button_tree" model="ir.ui.view">
<field name="name">tree.button.tree</field>
<field name="model">tree.button</field>
<field name="arch" type="xml">
<!-- 在tree标签中将add_new设为true即可显示按钮-->
<tree editable="bottom" add_new="true">
<field name="name"/>
</tree>
</field>
</record>
最终项目结构:
image.png
项目代码放在码云:https://gitee.com/grey27/demo_addons/tree/master/tree_button
网友评论