Odoo 自定義Widgets 基礎教程（章節1）

你們好，

這次，咱們主要講解 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) {}

大同小異，最後三種方法留給你們去探索。