大家好，
此次，我們主要講解 Odoo 中的Widgets。
網上、論壇里很多提及Widget的文章，但很少說Odoo自定義Widget 是如何實現的，這一直是大家所苦惱的地方。本章，將對Odoo中的Widget 進行基礎講解。
首先， Widget【掛件】產生的目的，是為了方便后端開發人員在不熟悉JavaScripts 的情況下，能快速地實現前端視圖展示。
我們來看看Widget 所在的目錄：
/addons/web/src/static/src/js/core/widget.js
其次，要理解Widget 原理，就是通過js把現有視圖或者DOM一類對象進行渲染。所有代碼都在前端！就是說，視圖是通過客戶端來渲染完成的！
這里最核心的一段代碼：
var Widget = core.Class.extend(mixins.PropertiesMixin, ServicesMixin,{ .......定義各種方法....... }方法說明及解釋如下：
init: function (parent)
構造部件並設置父節點；
*父節點的意義在於將當前實例綁定到給定的小部件實例。可以為空。當通過調用destroy方法時，當此掛件實例將被摧毀。
willStart: function ()
方法在“初始化 init”和“開始”之間調用。執行渲染和啟動方法所需的異步調用。
destroy: function ()
摧毀當此掛件實例
appendTo: function (target)
渲染當前的小部件並將其附加到給定的jQuery對象或控件上。
target 為jQuery對象或控件實例。
prependTo: function (target) {},
渲染當前的小部件並將其預置到給定的jQuery對象或控件上。
target 為jQuery對象或控件實例。
append()和prepend()的作用（區別）
append()用於在被選元素的結尾插入元素。
prepend()用於在被選元素的開頭插入元素。看下面的HTML代碼
<div id="test"> <p>a</p> </div>使用 append( ) 和 prepend( )添加元素
$(document).ready(function(){ $("#test").append("<p>b</p>") //使用append()添加 b 段落 $("#test").prepend("<p>c</p>") //使用 prepend()添加 c 段落 })效果如下
<div id="test"> <p>c</p> <p>a</p> <p>b</p> </div>
insertAfter: function (target) { },
insertAfter()函數用於將所有匹配元素插入到指定元素之后的位置：
<p>段落文本1<span></span></p> <p>段落文本2<span></span></p>
<!--以上是jQuery代碼執行前的html內容--> <script type="text/javascript"> $('<!--插入到p元素之后的位置-->').insertAfter( "p" ); // 其返回值就是匹配插入內容(兩個注釋元素'<!--插入到p元素之后的位置-->')的jQuery對象 </script> <!--以下是jQuery代碼執行后的html內容--> <p>段落文本1<span></span></p><!--插入到p元素之后的位置--> <p>段落文本2<span></span></p><!--插入到p元素之后的位置-->insertBefore: function (target) { }
insertBefore()函數用於將所有匹配元素插入到指定元素之前的位置：
<p>段落文本1<span></span></p> <p>段落文本2<span></span></p>
<!--以上是jQuery代碼執行前的html內容--> <script type="text/javascript"> $('<!--插入到p元素之前的位置-->').insertBefore( "p" ); // 其返回值就是匹配插入內容(兩個注釋元素'<!--插入到p元素之前的位置-->')的jQuery對象 </script> <!--以下是jQuery代碼執行后的html內容--> <!--插入到p元素之前的位置--><p>段落文本1<span></span></p> <!--插入到p元素之前的位置--><p>段落文本2<span></span></p>attachTo: function (target) { }
將當前掛件附加到DOM元素上
【這也是odoo field中添加 widgets 后，可以對字段進行渲染的核心】
var self = this; this.setElement(target.$el || target); return this.willStart().then(function () { return self.start(); });replace: function (target) {}
渲染當前窗口掛件並替換給定的jQuery對象
start: function () {}
此方法一般是在渲染完成后調用。主要用於綁定動作，執行異步操作，調用動作等。
一般來說，此方法應該返回一個可以傳遞到$.when()的對象來通知調用方這個小掛件已經初始化
renderElement: function () {}, replaceElement: function ($el) { } setElement: function (element) {}大同小異，最后三種方法留給大家去探索。
來源連接：https://my.oschina.net/u/3234288/blog/2967513