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

Question

I am using Odoo 10e. I want to integrate a jquery plugin into my module.

I want to integrate the jQuery plugin jquery-resizable-columns. It simple helps user to resize columns of table on the fly and I want to apply this on a specific model's list view

Which method should I extend in order to add the plugin?

Answer 1

I think you should extend (maybe include) some widget in the web module. If you go to the file /addons/web/static/src/js/view_list.js, you can see the widget that renders the 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();
    },

As you can see there is an event declared as sort_by_column, so you would have to add the plugin you want in a similar way.

And if you have any doubts inheriting and modifying widgets you can go to the Odoo Documentation

And if you are using the version 10 you can check how it is built here /addons/web/static/src/js/views/list_view.js