Xpages將事件附加到數據視圖中傳呼機的部分刷新

Question

在previous post中，我詢問了如何將引導類添加到數據視圖。答案是將該類添加到腳本塊中的「table.dataview」中。表格創建完成後，該類將應用並且一切正常。

但是當我使用尋呼機格式化消失。我在分頁器上使用部分刷新來刷新數據表，但這樣做意味着引導類不會應用於表。

我相信我需要添加一個事件處理程序，它將附加到dataView的刷新操作以添加該類。然而，我不能讓事件處理程序工作。

我的代碼爲事件處理程序如下。

<xp:eventHandler refreshMode="partial" submit="true" 
      id="applyCSS" refreshId="dataView1" event="parialRefresh" 
      value="what" loaded="false"> 
      <xp:this.binding><![CDATA[#{javascript:"pager1"}]]></xp:this.binding> 
      <xp:this.action><![CDATA[#{javascript:("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")}]]></xp:this.action> 
     </xp:eventHandler> 

奧利弗，渲染= false只是一個錯字 - 我正在測試一些東西，需要暫時抑制。

奧利弗和保羅，

昨晚我能得到局部刷新工作。

我碰到了this post by Mark Roden，它解釋瞭如何去做。有兩種不同的方式來實現這一點，少一個和一個更有效。我使用的代碼如下。

<xp:scriptBlock id="scriptBlock3"> 
      <xp:this.value><![CDATA[$('.dataView1PanelWrapper').on("DOMNodeInserted", function(){ 
    $("table.dataview").addClass("table-striped table-hover table-bordered table-condensed") 
})]]></xp:this.value> 
     </xp:scriptBlock> 

但是，並不存在幾乎總是然而，在XPages中，我有一些排序的列在視圖中，點擊排序帶來了同樣的問題！我失去了課堂作業！

所以，現在我將不得不攔截那個事件，對吧？

有關這將結束。不喜歡DOM操作的想法，並且只有在擁有DOM操作時纔會這麼做。

我開始使用一個簡單的視圖。它工作得很好，但由於某種原因，間距在尋呼機中混亂了。我發現通過將尋呼機移出視圖本身，我能夠解決對齊問題。我認爲使用視圖會更好，因爲我可以直接分配類，並且不必執行所有這些操作。然而，知道未來如何做到這一點非常好。

這就是你會建議？

============================================== ==== 我曾嘗試使用輸出腳本的Paul Withers建議。這適用於初始頁面加載，但不適用於數據視圖的任何其他更改 - 當傳呼機觸發或排序或任何其他更改時。我很近，但沒有雪茄。有什麼建議麼？

<xp:scriptBlock id="scriptBlock5" loaded="false"> 
     <xp:this.value><![CDATA[dojo.require("dojo.behavior"); 

Behavior = { 
    ".dataview": { 
     found: function(node) { 

      dojo.addClass(node,".table-striped table-hover table-bordered table-condensed"); 
      //node.addClass("table-striped table-hover table-bordered table-condensed"); 
     } 
    } 
} 

dojo.ready(function() { 
    dojo.behavior.add(Behavior); 
    dojo.behavior.apply(); 
}); 

//Make sure that future pagers are also straightened out 
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) { 
    dojo.behavior.apply(); 
});]]></xp:this.value> 
    </xp:scriptBlock> 

Answer 1

將您現有的xp：scriptBlock與xe：dataView中的工作代碼一起移動。然後，樣式將應用於初始加載和所有部分刷新。

Answer 2

你應該打電話給你CSJS東西添加類的事件處理程序的onComplete屬性 - 很難找到，只突出源代碼或大綱事件處理程序對象，然後打開「所有屬性」，找到「onComplete」屬性。這個事件允許CSJS被調用。

順便說一句：爲什麼加載的屬性= false？事件將永遠不會呈現。

Answer 3

dojo.behavior,dojo.ready和dojo.subscribe應該允許你管理這個。dojo.behavior允許您爲將通過Dojo查詢檢索的特定元素集合定義特定行爲。 dojo.ready（我相信）在頁面初始加載時運行代碼，並且dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {...}將在部分刷新後運行代碼。

下面是我用於將DataView的類別列圖像轉換爲Font Awesome圖標的示例代碼，因此Behavior = {...}位需要修改。

Behavior = { 
    // Convert xp:pagers to Bootstrap 
    ".catColumn a img": { 
     found: function(img_node) { 
      var imgSrc = dojo.getNodeProp(img_node, "alt").toLowerCase(); 
      if (imgSrc.indexOf("collapse") >= 0) { 
       dojo.place('<i class="fa fa-minus-square"></i>&nbsp;', img_node, 'replace'); 
      } else { 
       dojo.place('<i class="fa fa-plus-square"></i>&nbsp;', img_node, 'replace'); 
      } 
     } 
    } 
} 

dojo.ready(function() { 
    dojo.behavior.add(Behavior); 
    dojo.behavior.apply(); 
}); 

//Make sure that future pagers are also straightened out 
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) { 
    dojo.behavior.apply(); 
});