Odoo13之在tree檢視左上角新增自定義按鈕
阿新 • • 發佈:2020-07-12
前言
首先展示效果圖,如下圖所示,在資產裝置模組tree檢視的左上角添加了一個同步資產的按鈕。
要完成按鈕的新增,分為四步,分別是:
- 1.編寫xml檔案,找到相關模型tree檢視,並給模型tree檢視append一個具有特定類(html class)的按鈕;
- 2.編寫js檔案,根據特定類找到按鈕,繫結點選事件,觸發相應處理函式,此處處理函式的作用是觸發後端模型的函式;
- 3.在odoo中匯入上一步編寫的js檔案;
- 4.在odo模組的__mainfest__.py檔案中引入上述檔案;
以下是我的模組結構:
編寫xml檔案
在static/src/xml下編寫assete_equip_sync_bt_view.xml檔案如下:
<?xml version="1.0" encoding="UTF-8"?> <templates id="sync_equip_template" xml:space="preserve"> <t t-extend="ListView.buttons"> <t t-jquery=".o_list_buttons" t-operation="append"> <!-- 找到名為 "assets.equipment"的模型,並在它的列表(tree)檢視後面append一個按鈕 --> <t t-if="widget and widget.modelName == 'assets.equipment'"> <!--btn表示按鈕,btn-sm小按鈕,btn-default預設按鈕,btn-primary主要按鈕?--> <button class="btn btn-primary o_list_tender_bt_sync_equip" type="button">同步資產</button> </t> </t> </t> </templates>
其中要注意修改成適合自己的幾個點如下圖
程式碼註釋如上圖
編寫JS檔案
在static/src/js下編寫equip_sync_button.js如下
odoo.define('assets_equipment.list_sync_equip_button_create', function (require) { "use strict"; var ListView = require('web.ListView'); var viewRegistry = require('web.view_registry'); var ListController = require('web.ListController'); ListController.include({ renderButtons: function ($node) { this._super.apply(this, arguments); if (this.$buttons) { this.$buttons.on('click', '.o_list_tender_bt_sync_equip', this._sync_equip.bind(this)); } }, _sync_equip: function () { var self = this; var records = this.getSelectedIds(); self._rpc({ model: 'assets.equipment', method: 'sync_assets', args: [records] }, [] ); } }); }) ;
其中要注意修改成適合自己的幾個點如下圖
大概解釋下就是:給包含類"o_list_tender_bt_sync_equip"的標籤繫結點選事件"_sync_equip";然後在下面編寫了一個_sync_equip函式,當點選該標籤時,就觸發該函式,該函式呼叫的是模型"assets.equipment"中的"sync_assets"函式;
匯入JS檔案
在views資料夾下編寫import_src.xml檔案如下
<?xml version="1.0" encoding="utf-8"?> <odoo> <template id="assets_backend" name="tree view menu" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <script type="text/javascript" src="/itom_assets/static/src/js/equip_sync_button.js"></script> </xpath> </template> </odoo>
關鍵處在於script那一行,引入上一步編寫的js檔案;注意進行相應的替換。
引入上述檔案
最後,在__mainfest__.py檔案中引入上述檔案,如下
{... 'data': [ 'views/import_src.xml', ], 'qweb': [ 'static/src/xml/assets_equip_sync_bt_view.xml' ], ...}
至此,就可以在某個模型的tree檢視上新增一個自定義按鈕