javascript - 单击 Odoo 10 中的 TreeView 字段时如何执行某些操作？

Question

我已经创建了自己的小部件，以这种方式在 TreeView 中调用:

<field name="selected" widget="toggle_switch"/>

字段selected 是boolean 类型。我创建了扩展 Column 类的小部件类:

var ListView = require('web.ListView');

var ToggleSwitch = ListView.Column.extend({
    template: 'ToggleSwitchSheet',
    events: {
        'click .slider': 'on_click',
    },

    init: function() {
        this._super.apply(this, arguments);
    },

    _format: function(row_data, options) {
        return QWeb.render(this.template, {
            'widget': this,
            'row_data': row_data,
            'prefix': session.prefix,
        });
    },
})

我是这样注册的:

var core = require('web.core');
core.list_widget_registry.add('field.toggle_switch', ToggleSwitch);

模板代码:

<t t-name="ToggleSwitchSheet">
    <label class="switch">
        <t t-if="row_data['selected']['value']">
            <input type="checkbox" checked="checked"/>
        </t>
        <t t-if="!row_data['selected']['value']">
            <input type="checkbox"/>
        </t>
        <span class="slider round"></span>
    </label>
</t>

它正在运行，但现在我想在每次用户单击我为小部件制作的模板的主要元素时修改 selected 字段的值。

问题是我做不到。 events 字典似乎不适用于 Column 类，我不能使用类似 this.on('click', this, this.on_click) ; 或 this.$el.find(...)，因为 this 只带来 field 数据。

谁能帮帮我？我是否应该从其他类继承以在我的小部件中使用事件(事实上我已经尝试过，但在每种情况下我的 Qweb 模板都从 TreeView 中消失了...)？

Answer 1

我认为你在这里混入了东西。或者可能不是。需要明确的是，列小部件仅用于显示信息。例如，让您的个性化 html 小部件适合 ListView 。要执行操作，可以使用操作按钮来更改 python 方法中的模型记录值。

我知道这并不完全相同，但我只是设置了基础，您可以通过使用列中的按钮使您的自定义小部件可点击，您的自定义小部件关联呈现按钮内选中值的结果，允许您调用模型中的自定义方法来更改记录值。

据说您的小部件与 ColumnBoolean 小部件几乎相同，但如果您想继续完成工作，我认为您可以这样做:

odoo.define('listview_label_click', function (require) {
"use strict";

    var ListView = require('web.ListView');

    ListView.List.include({
        init: function (group, opts) {
            this._super.apply(this, arguments);
            this.$current.delegate('td label.switch', 'click', function (e) {
                e.stopPropagation();
                // execute your code here, like:
                var checked = $(e.currentTarget).find('input').prop('checked');

            });
        }
    });

});