Odoo14_Tree视图自定义按钮和自定义面板

<odoo>
    <data>

        <template id="assets_backend" name="custom page assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">

                <script type="text/javascript" src="/wdc_model/static/src/js/wdc.js"></script>
                <link rel="stylesheet" type="text/css" href="/wdc_model/static/src/css/wdc.css"/>

            </xpath>
        </template>
    </data>
</odoo>

odoo.define(‘wdc_js‘, function (require) {
    "use strict";
    var ListController = require(‘web.ListController‘); // 引入列表控制器，用来修改tree视图
    var show_button_import = "wdc_model"; // 指定那个模型添加：想要自定义内容的模型

    ListController.include({
        // 自定义按钮方法
        renderButtons: function ($node){
            var $buttons = this._super.apply(this, arguments);
            var tree_model = this.modelName;    // 当前模型名称
            // 如果当前模型名称为上面定义的模型名称
            if (tree_model == show_button_import) {
                // 定义一个html按钮，点击时出发test函数
                var button_01 = $("<button id=‘but‘ type=‘button‘ class=‘btn btn-secondary btn_margin‘>自定义按钮</button>").click(this.proxy("test"))

                this.$buttons.append(button_01);    // 添加到已有按钮的后面
            }


            return $buttons;
        },

        test: function () {
            console.log(‘6666666666666666666‘);
        },

        // 自定义元素方法
        renderElement: function () {

            var $div = this._super.apply(this, arguments);
            var tree_model = this.modelName;   // 当前模型名称
            // 如果当前模型名称为上面定义的模型名称
            if (tree_model == show_button_import) {

                // 定义的自定义显示的html内容
                var div_03 = $("<div id=‘wdc3‘><table border=‘1‘>
                <tr>
                  <th>Month</th>
                  <th>Savings</th>
                  <th>Savings</th>
                  <th>Savings</th>
                  <th>Savings</th>
                </tr>
                <tr>
                  <td>January</td>
                  <td>$100</td>
                  <td>$100</td>
                  <td>$100</td>
                  <td>$100</td>
                </tr>
                </table></div>");
                var div_02 = $("<div id=‘wdc2‘><table border=‘1‘>
                <tr>
                  <th>Month</th>
                  <th>Savings</th>
                  <th>Savings</th>
                  <th>Savings</th>
                  <th>Savings</th>
                </tr>
                <tr>
                  <td>January</td>
                  <td>$100</td>
                  <td>$100</td>
                  <td>$100</td>
                  <td>$100</td>
                </tr>
                </table></div>");



                // 将自定义的html内容，添加到视图中想要添加的位置
                this.$(‘.o_content‘).append(div_02);
                this.$(‘.o_content‘).append(div_03);
            }
        },

    });
});