使用JQuery將函數分配給Primefaces DataList子項

我正在嘗試在Primefaces中創建一個可排序的jQuery UI，並將我的html/jquery示例轉換爲primefaces jquery。我試圖將sortable（）函數添加到dataList中的每個元素。有關如何應用sortable（）（這個函數在外部庫中）的任何想法。使用JQuery將函數分配給Primefaces DataList子項

HTML示例：

$(function() { 
        $("#sortable").sortable(/*{placeholder: "ui-state-highlight"}*/); 
        $("#sortable").disableSelection(); 
      }); 
      </script> 
    </head> 
    <body> 
    <div class="demo"> 

    <ul id="sortable"> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
     <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li> 
      <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>   
    </ul>

primefaces嘗試：

<script> 
    $ = jQuery 
    $(function() { 
    $("#dreamModifyFrm:topTenGrd").sortable(); 
    $("#dreamModifyFrm:topTenGrd").disableSelection(); 
    }); 
    </script> 
    <h:form id="dreamModifyFrm" binding="#{dreamModify.dreamModifyFrm}"> 
     <p:dataList id="topTenGrd" var="dream" value="#{dreamModifyBean.topDreams}"> 
       <h:outputText class="dream-title uppercase" value="#{dream.number}. #{dream.title}" /> 
              <p:commandLink oncomplete="dreamEditDlg.show()" update=":dreamEditFrm:display"> 
                    <f:setPropertyActionListener value="#{dream}" target="#{dreamModifyBean.selectedDream}"/> 
                    <f:setPropertyActionListener value="true" target="#{dreamModifyBean.editLink}"/> 
                    <p:graphicImage value="#{dream.imageThumb}" width="125" height="100" /> 
              </p:commandLink> 
                                                                          
    </p:dataList> 
</h:form>

來源

2011-04-05 c12

雖然晚了一點，答案可能會有所幫助。

問題：jQuery的.sortable（）函數嘗試排序所選對象的直接子元素。由於primefaces在你的列表中呈現一些div，你需要明確指出包含的ul。

解決方案：

<script type="text/javascript"> 
$(function() { 
    $("#dreamModifyFrm:topTenGrd ul").sortable(); 
    $("#dreamModifyFrm:topTenGrd ul").disableSelection(); 
}); 
</script>

（注意：修改後的jQuery的選擇）

編輯：爲DataTable的等效行爲。您需要通過「tbody」修改選擇器

來源

2011-05-17 12:33:01 Panda

使用JQuery將函數分配給Primefaces DataList子項

回答

相關問題