How to add an external jQuery plugin to the list v

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

In .js file you have to first extend particular list view's js. After that give your custom model name in that .js file and run that.

Answer 2

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

Answer 3

In your case, You need.

Created a new module or modify already custom module

Create file.js and file.xml.

In the file xml you must write this

<?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>

And after you needing extent the list_view.js of Odoo to integrate your plugin.