odoo中tree視圖上面添加按鈕並綁定事件

原文:https://blog.csdn.net/qq_42832858/article/details/86735745
1、通過qweb模板給相應模塊上的tree視圖上添加上⾃定義的按鈕。
在’static/src/xml’⽂件下創建⼀個xml⽂件,我的是在demo.xml⾥⾯編寫如下代碼:
odoo中tree視圖上面添加按鈕並綁定事件
原理就是通過css選擇器找到tree視圖上⾯包含按鈕的div標籤如上⾯代碼中的 tjquery=“div.o_list_buttons” 然後通過 t-if=“widget.displayName==‘貨品業務調整’” 判斷在哪個頁⾯中
添加按鈕。代碼中按鈕的 create_by_dept 類名是⾃⼰定義的,到時候需要在js代碼中通過類名找到該按鈕給
按鈕綁定⽅法和事件
2、將上⼀步中編寫的qweb模板添加到manifest.py⽂件中:
odoo中tree視圖上面添加按鈕並綁定事件
3、接下來在static/src/css/js中編寫⾃⼰的xxx_view.js代碼給按鈕綁定事件⽅法,我的測試⽂件是
bicon_list_view_button.js。下⾯給出的代碼已經給出了詳細的註釋

odoo.define('bicon_wms_base.bicon_list_view_button', function (require) {
    "use strict";
//這些是調⽤需要的模塊
    var ListView = require('web.ListView');
    var viewRegistry = require('web.view_registry');
    var ListController = require('web.ListController');
//這塊代碼是繼承ListController在原來的基礎上進⾏擴展
    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_dept
                btn.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視圖中選中的數據的記錄集
            var records = _.map(self.selectedRecords, function (id) {
                return self.model.localData[id];
            });
console.log("數據id:" + _.pluck(records, 'res_id'));
//獲取到數據集中每條數據的對應數據庫id集合
            var ids = _.pluck(records, 'res_id');
//通過rpc調⽤路由爲/cheshi/hello的controller中的⽅法
// this._rpc({
// route: '/cheshi/hello',
// params: {}
// });
//通過rpc調⽤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在原來的基礎上進⾏擴展
//這塊⼀般只需要在config中添加上⾃⼰的Model,Renderer,Controller
//這⾥我就對原來的Controller進⾏了擴展編寫,所以就配置了⼀下BiConListController
    var BiConListView = ListView.extend({
        config: _.extend({}, ListView.prototype.config, {
            Controller: BiConListController,
        }),
    });
//這⾥⽤來註冊編寫的視圖BiConListView,第⼀個字符串是註冊名到時候需要根據註冊名調⽤視圖
    viewRegistry.add('bicon_list_view_button', BiConListView);
    return BiConListView;
});

4.在模塊的views⽂件夾下創建⼀個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⽂件中
odoo中tree視圖上面添加按鈕並綁定事件
6.調用自己的視圖通過js-class值是註冊的視圖名:
odoo中tree視圖上面添加按鈕並綁定事件
7.被調用的model中的方法my_function:
odoo中tree視圖上面添加按鈕並綁定事件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章