示例1

1.通過qweb模板給相應模塊上的tree視圖上添加上?定義的按鈕。

在’static/src/xml’?件下創(chuàng)建?個xml?件，我的是在demo.xml??編寫如下代碼：

<?xml version="1.0" encoding="UTF-8"?> <template id="tax_reports_by_iuv" xml:space="preserve"><t t-extend="ListView.buttons"><t t-jquery="div.o_list_buttons" t-operation="append"><t t-if="widget.displayName=='分所'"><button class="btn btn-primary create_by_dept" type="button">分所分稅種</button></t></t></t> </template>

原理就是通過css選擇器找到tree視圖上?包含按鈕的div標簽如上?代碼中的 tjquery=“div.o_list_buttons” 然后通過 t-if=“widget.displayName==‘分所’” 判斷在哪個頁?中
添加按鈕。代碼中按鈕的 create_by_dept 類名是??定義的，到時候需要在js代碼中通過類名找到該按鈕給
按鈕綁定?法和事件

2.將上?步中編寫的qweb模板添加到__manifest__.py?件中:

'qweb': ['static/src/xml/demo.xml',],

3.接下來在static/src/css/js中編寫??的xxx_view.js代碼給按鈕綁定事件?法，我的測試?件是

bicon_list_view_button.js。下?給出的代碼已經(jīng)給出了詳細的注釋

odoo.define('bicon_wms_base.bicon_list_view_button', function (require) {"use strict"; //這些是調(diào)?需要的模塊var ListView = require('web.ListView');var viewRegistry = require('web.view_registry');var ListController = require('web.ListController'); //這塊代碼是繼承ListController在原來的基礎(chǔ)上進?擴展var BiConListController = ListController.extend({renderButtons: function () {console.log('進進??按按鈕鈕渲渲染染??法法！！');this._super.apply(this, arguments);if (this.$buttons) { //這?找到剛才定義的class名為create_by_dept的按鈕var btn = this.$buttons.find('.create_by_dept');var btn_release_by_container = this.$buttons.find('.release_by_container'); //給按鈕綁定click事件和?法create_data_by_deptbtn.on('click', this.proxy('create_data_by_dept'));btn_release_by_container.on('click', this.proxy('create_release_by_container'));}},create_data_by_dept: function () {var self = this;console.log('進進??了了按按鈕鈕綁綁定定的的??法法????！！！！！！'); //這?是獲取tree視圖中選中的數(shù)據(jù)的記錄集var records = _.map(self.selectedRecords, function (id) {return self.model.localData[id];}); console.log("數(shù)據(jù)id：" + _.pluck(records, 'res_id')); //獲取到數(shù)據(jù)集中每條數(shù)據(jù)的對應數(shù)據(jù)庫id集合var ids = _.pluck(records, 'res_id'); //通過rpc調(diào)?路由為/cheshi/hello的controller中的?法 // this._rpc({ // route: '/cheshi/hello', // params: {} // }); //通過rpc調(diào)?bs.warehouse模塊中的my_function?法this._rpc({model: 'wms.goods.log.adjust',method: 'my_function',args: [ids],}).then(function () {location.reload();});},create_release_by_container: function () {var self = this;var records = _.map(self.selectedRecords, function (id) {return self.model.localData[id];});var ids = _.pluck(records, 'res_id');this._rpc({model:'base.container',method:'my_function',args:[ids],}).then(function () {location.reload();})},}); //這塊代碼是繼承ListView在原來的基礎(chǔ)上進?擴展 //這塊?般只需要在config中添加上??的Model,Renderer,Controller //這?我就對原來的Controller進?了擴展編寫，所以就配置了?下BiConListControllervar BiConListView = ListView.extend({config: _.extend({}, ListView.prototype.config, {Controller: BiConListController,}),}); //這??來注冊編寫的視圖BiConListView，第?個字符串是注冊名到時候需要根據(jù)注冊名調(diào)?視圖viewRegistry.add('bicon_list_view_button', BiConListView);return BiConListView; });

4.在模塊的views?件夾下創(chuàng)建?個assets.xml的?件編寫代碼導?上?步寫的js?件(css?件也是這樣導?

<?xml version="1.0" encoding="utf-8"?> <odoo><template id="assets_backend_bicon_wms_base_1" inherit_id="web.assets_backend" name="bicon_wms_base_assets_1"><xpath expr="link[last()]" position="after"><link rel="stylesheet" type="text/scss" href="/bicon_wms_base/static/src/scss/bicon_form_view.scss"/></xpath><xpath expr="script[last()]" position="after"><script type="text/javascript" src="/bicon_wms_base/static/src/js/bicon_relationnal_fields.js"/><script type="text/javascript" src="/bicon_wms_base/static/src/js/bicon_form_view.js"/><script type="text/javascript" src="/bicon_wms_base/static/src/js/bicon_list_view_button.js"/></xpath></template> </odoo>

5.再將assets.xml?件路徑添加到__manifest__.py?件中

'data': ['views/assets.xml',],

6.調(diào)用自己的視圖通過js-class值是注冊的視圖名:

<field name="arch" type="xml"><tree js_class="bicon_list_view_button"><field name="create_date"/></tree>

7.被調(diào)用的model中的方法my_function:

@api.modeldef my_function(self):************return ***

---

示例二

效果圖

1.在static目錄下新建模板文件，路徑：my_test/static/src/xml/tree_button.xml

<?xml version="1.0" encoding="UTF-8"?><templates id="template_02" xml:space="preserve"><t t-extend="ListView.buttons"><t t-jquery="div.o_list_buttons" t-operation="append"><button class="btn btn-primary create_by_xf" type="button" >按鈕哦</button></t></t></templates>

2.my_test/static/src/js/add_button.js 寫對應的JS腳本

odoo.define('bicon_wms_base.bicon_list_view_button', function (require) {"use strict"; //這些是調(diào)?需要的模塊var ListView = require('web.ListView');var viewRegistry = require('web.view_registry');var ListController = require('web.ListController'); //這塊代碼是繼承ListController在原來的基礎(chǔ)上進?擴展var BiConListController = ListController.extend({renderButtons: function () {console.log('進進??按按鈕鈕渲渲染染??法法！！');this._super.apply(this, arguments);if (this.$buttons) {//這?找到剛才定義的class名為create_by_xf的按鈕var btn = this.$buttons.find('.create_by_xf');//給按鈕綁定click事件和?法create_data_by_deptbtn.on('click', this.proxy('create_data_by_dept'));}},create_data_by_dept: function () {var self = this;console.log('進進??了了按按鈕鈕綁綁定定的的??法法????！！！！！！');//這?是獲取tree視圖中選中的數(shù)據(jù)的記錄集var records = _.map(self.selectedRecords, function (id) {return self.model.localData[id];});console.log("數(shù)據(jù)id：" + _.pluck(records, 'res_id'));//獲取到數(shù)據(jù)集中每條數(shù)據(jù)的對應數(shù)據(jù)庫id集合var ids = _.pluck(records, 'res_id');//通過rpc調(diào)?路由為/cheshi/hello的controller中的?法// this._rpc({// route: '/cheshi/hello',// params: {}// });//通過rpc調(diào)?bs.warehouse模塊中的my_function?法this._rpc({model: 'hr.leave.categeroy',method: 'my_function',args: [ids],}).then(function () {location.reload();});},}); //這塊代碼是繼承ListView在原來的基礎(chǔ)上進?擴展 //這塊?般只需要在config中添加上??的Model,Renderer,Controller //這?我就對原來的Controller進?了擴展編寫，所以就配置了?下BiConListControllervar BiConListView = ListView.extend({config: _.extend({}, ListView.prototype.config, {Controller: BiConListController,}),}); //這??來注冊編寫的視圖BiConListView，第?個字符串是注冊名到時候需要根據(jù)注冊名調(diào)?視圖viewRegistry.add('bicon_list_view_button', BiConListView);return BiConListView; });

3.調(diào)用JS腳本的xml，路徑：my_test/views/add_button.xml

<?xml version="1.0" encoding="UTF-8"?> <odoo><template id="assets_backend_bicon_wms_base_1" inherit_id="web.assets_backend" name="bicon_wms_base_assets_1"><xpath expr="script[last()]" position="after"><script type="text/javascript" src="/zicthr_attendance/static/src/js/add_button.js"/></xpath></template> </odoo>

4.配置__mainifest__.py文件，

'data': ['views/add_button.xml'],'qweb':['static/src/xml/tree_button.xml']

5.在對應的model：‘hr.leave.categeroy’,寫my_function方法

def my_function(self):print('2223333')return {'warning': {'title': '提示','message': '知道🌶啦！'}}

6.視圖中添加這個按鈕

<record id="leave_type_tree" model="ir.ui.view"><field name="name">休假配置</field><field name="model">hr.leave.categeroy</field><field name="arch" type="xml"><tree js_class="bicon_list_view_button"><field name="name"/><field name="key"/></tree></field></record>

以上會吧所有的tree上面添加此按鈕。
如何針對特定頁面特定顯示，可以通過找到對應的菜單名稱，在此菜單項下的tree視圖添加。修改my_test/static/src/xml/tree_button.xml，添加判斷：

<t t-jquery="div.o_list_buttons" t-operation="append"><t t-if="widget.displayName == '休假配置'"><button class="btn btn-primary create_by_xf" type="button" >按鈕哦</button></t> </t>

js按鈕跳轉(zhuǎn)form視圖

odoo.define('company_tax.btn_tax_reports_by_iuv', function (require) {"use strict";var ListView = require('web.ListView');var viewRegistry = require('web.view_registry');var ListController = require('web.ListController');var core = require('web.core');var _t = core._t;//這塊代碼是繼承ListController在原來的基礎(chǔ)上進?擴展var BiConListController = ListController.extend({renderButtons: function () {this._super.apply(this, arguments);if (this.$buttons) {var leavebtn = this.$buttons.find('.btn_tax_reports_by_iuv');leavebtn.on('click', this.proxy('action_to_branch_tax'));}},action_to_branch_tax: function () {var self = this;console.log('create makeup apply！！！！！！');//rpc先去查view的id，得到的結(jié)果傳給then的方法，在then中打開視圖this._rpc({model: 'ir.model.data',method: 'get_object_reference',args: ['company_tax','view_branch_tax_date_wizard']}).then(function (view_ids) {console.log(view_ids);self.do_action({res_model: 'branch.tax.date',name: '分所分稅種',views: [[view_ids[1], 'form']],view_mode: 'form',target: 'current',type: 'ir.actions.act_window',});});},});var BiConListView = ListView.extend({config: _.extend({}, ListView.prototype.config, {Controller: BiConListController,}),});//這來注冊編寫的視圖BiConListView，第?個字符串是注冊名到時候需要根據(jù)注冊名調(diào)?視圖viewRegistry.add('btn_tax_reports_by_iuv', BiConListView);return BiConListView; });

另外。附另一篇：
tree視圖添加按鈕，選擇數(shù)據(jù)并彈出彈窗進行數(shù)據(jù)操作

總結(jié)

以上是生活随笔為你收集整理的Odoo tree视图使用js添加按钮（以及跳转页面）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。