如何将外部 jQuery 插件添加到 Odoo 的列表视图中？

Question

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

我想集成 jQuery 插件 jquery-resizable-columns。它简单地帮助用户即时调整 table 列的大小，我想将其应用于特定模型的列表视图

我应该扩展哪个方法来添加插件？

Answer 1

在你的情况下，你需要。

创建了一个新模块或修改了已经自定义的模块

创建 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 来集成您的插件之后。

Answer 2

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

Answer 3

我认为您应该在 Web 模块中扩展（也许包括）一些小部件。如果转到文件 /addons/web/static/src/js/view_list.js，您可以看到呈现 table:

的小部件

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

如何将外部 jQuery 插件添加到 Odoo 的列表视图中？

How to add an external jQuery plugin to the list view on Odoo?

odoo

odoo-8

odoo-9

odoo-view

odoo-10