TWaver初學實戰——如何在TWaver屬性表中添加日曆控件？

在日期輸入框中添加日曆控件，是一種很是流行和實用的作法。臨淵羨魚不如退而寫代碼，今天就看看在TWaver中是如何實現的。

 

資源準備

 

TWaver的在線使用文檔中，就有 TWaver PropertySheet的demo，直接拿來用就行了。

 

 

js的日曆控件，網上更是琳琅滿目，我相中的是 一款「很是好的一個js日曆控件」，源碼完整，結構清晰，功能齊全，實用好看。

 

 

建立Date

 

首先咱們清理精簡一下TWaver源代碼，再爲node經過setClient()建立一個名爲Date的屬性，最後在PropertySheet中經過addClientProperty()插入此屬性行。

 

 

未來咱們但願在PropertySheet中點擊Date行的value欄，就能夠彈出那個calendar控件來。那麼就須要將顯示日曆的函數加到以下代碼塊中：

 

propertysheet.onEditorRendered = function(rowInfo){
    if (rowInfo.property.getPropertyName() === 'Date') {
         //calendar顯示代碼
    }
}

 

那麼目前的主要問題就是，如何正確顯示日曆控件呢？

 

尋找input

 

這款控件只有一個calendar.js文件，直接引入到那個PropertySheet源碼文件中就可使用了。不過要想讓它顯示出來，確實還不是件容易的事兒。和網上絕大多數控件同樣，默認都是直接插入到網頁的「input」標籤中，其help文檔給出的基本方法以下：

 

<input name="date" type="text" id="date" onclick="calendar.show(this);" size="10" maxlength="10" readonly="readonly" />

 

不過這一招在PropertySheet上可就有點不靈了，根本不是一個格式和套路啊。

 

看來日曆控件的顯示函數是show()，咱們只要找到正確的參數傳給它就能夠了。能夠直接把rowInfo直接傳進去嗎？試一下吧。

 

 

別說，還真能出來，不過位置卻始終在左上角，根本不是想要的啊。看來參數傳的並不對，必需要找到PropertySheet的input才行。其實TWaver的PropertySheet還真有相應的屬性，不過其名字是_currentEditor，不信我們將this._currentEditor傳進去試試：

 

 

怎麼樣，位置完美了吧！

 

惋惜這個參數並無開放，通常的小夥伴根本不知道啊！其實也還有辦法解決，那就是經過如下代碼本身建立input：

 

var date = document.createElement("input");
date.setAttribute("type", "text");
date.setAttribute("onclick", "calendar.show(this);")
rowInfo.valueRender.appendChild(date);
calendar.show(date);

 

效果也差很少。

 

插入日期

 

不過日曆仍是沒法正常使用，實際操做一下會發現，還有大問題：點選日期後，選擇的日期值並不會上屏！

 

理一理思路，先看看控件中是怎麼推送日期值的。稍微研究一下發現， calendar.js中是bindData()推送日期的，其中的calendar.dateControl.value即爲選中的日期值。咱們只要將這個值直接賦值給PropertySheet中的相應位置，任務就完成了。如今的關鍵，是如何將PropertySheet中的位置信息準確傳遞到calendar.js中。

 

無論白貓黑貓，解決問題就好。咱們乾脆就用個全局變量calendar.rowInfo來傳遞，先在onEditorRendered中將參數rowInfo賦給它，再在bindData()中將其傳遞給賦值語句。具體在bindData()中適合地方添加如下語句：

 

propertysheet.setValue(calendar.rowInfo.data, calendar.rowInfo.property, calendar.dateControl.value);

  

如今再試一試吧，怎麼樣？激動人心的一幕出現了吧！

  

隱藏日曆

 

先別急着歡呼，彈出正常了，上屏也沒問題，但它卻有個霸屏的毛病：點擊控件以外的任何地方，日曆並不消失隱藏，始終盤踞在那裏，真是請神容易送神難啊。咱們只有添加鼠標監聽事件來強行送客了。

 

當鼠標點擊拓撲圖時，能夠添加如下代碼監聽：

 

network.addInteractionListener(function (e) {
    if(e.kind == 'clickElement' || e.kind == 'clickBackground'){
        calendar.hide();
    }
});

 

屬性表也須要監聽：

 

propertysheet.getView().addEventListener('click',function (e) {
    calendar.hide();
});

  

好像大功告成了呢！雖然還有些小不完美，好比清空按鈕、自動隱藏等，但已不影響正常使用。也還能夠順着以上思路繼續完善，不過老是顯得有點繁瑣。

 

聽說TWaver的攻城獅已將此功能列入新版本開發計劃，未來能夠更方便完美地在屬性表中插入各類控件，敬請期待吧！