How to add an external jQuery plugin to a list on Odoo?

Question

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

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

Which method should be extended to add a plugin?

Answer 1

I think you should extend (possibly include) some widget in the web module. If you go to the /addons/web/static/src/js/view_list.js file, you will see a widget that displays 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 will need to add the plugin you want in a similar way.

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

Answer 2

In the .js file, you must first expand the specific view of the js list. After that, enter your custom model name in this .js file and run it.

Answer 3

In your case you need.

Created a new module or changed an already configurable module

Create a .js file and file.xml.

In the xml file you should 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 need the extension, list_view.js from Odoo integrates your plugin.