如何在Odoo的列表视图中添加外部jQuery插件?

时间:2017-10-23 16:08:56

标签: odoo-8 odoo-10 odoo-9 odoo odoo-view

我正在使用Odoo 10e。我想将一个jquery插件集成到我的模块中。

我想整合jQuery插件jquery-resizable-columns。它很简单,可以帮助用户动态调整表格的大小,我想在特定模型的列表视图中应用它

为了添加插件,我应该扩展哪种方法?

3 个答案:

答案 0 :(得分:1)

在.js文件中,您必须首先扩展特定列表视图的js。之后,在该.js文件中提供您的自定义模型名称并运行它。

答案 1 :(得分:1)

我认为您应该在Web模块中扩展(可能包括)一些小部件。如果您转到文件/addons/web/static/src/js/view_list.js,您可以看到呈现该表的小部件:

instance.web.ListView = instance.web.View.extend( /** @lends instance.web.ListView# */ {
    _template: 'ListView',
    display_name: _lt('List'),
    defaults: {
        // records can be selected one by one
        'selectable': true,
        // list rows can be deleted
        'deletable': false,
        // whether the column headers should be displayed
        'header': true,
        // display addition button, with that label
        'addable': _lt("Create"),
        // whether the list view can be sorted, note that once a view has been
        // sorted it can not be reordered anymore
        'sortable': true,
        // whether the view rows can be reordered (via vertical drag & drop)
        'reorderable': true,
        'action_buttons': true,
        //whether the editable property of the view has to be disabled
        'disable_editable_mode': false,
    },
    view_type: 'tree',
    events: {
        'click thead th.oe_sortable[data-id]': 'sort_by_column'
    },

    // [...]

    sort_by_column: function (e) {
        e.stopPropagation();
        var $column = $(e.currentTarget);
        var col_name = $column.data('id');
        var field = this.fields_view.fields[col_name];
        // test whether the field is sortable
        if (field && !field.sortable) {
            return false;
        }
        this.dataset.sort(col_name);
        if($column.hasClass("sortdown") || $column.hasClass("sortup"))  {
            $column.toggleClass("sortup sortdown");
        } else {
            $column.addClass("sortdown");
        }
        $column.siblings('.oe_sortable').removeClass("sortup sortdown");

        this.reload_content();
    },

正如您所看到的,事件被声明为sort_by_column,因此您必须以类似的方式添加所需的插件。

如果您对继承和修改小部件有任何疑问,可以转到Odoo Documentation

如果您使用的是版本10,则可以查看其构建方式here /addons/web/static/src/js/views/list_view.js

答案 2 :(得分:0)

在你的情况下,你需要。

创建新模块或修改已自定义模块

创建file.js和file.xml。

在文件xml中你必须写这个

<?xml version="1.0" encoding="utf-8"?>
<odoo>
  <template id="assets" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
     <link rel="stylesheet" href="/module_name/static/src/css/css_file.css"/>
      <script type="text/javascript" src="/module_name/static/src/js/js_file.js"></script>
    </xpath>
  </template>
</odoo>

在你需要扩展Odoo的list_view.js以整合你的插件之后。