Odoo13之在tree視圖左上角添加自定義按鈕

前言

首先展示效果圖，如下圖所示，在資產設備模組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視圖上添加一個自定義按鈕了；

Tags:

VirMach 便宜 VPS

QNews

QNews