使用JQuery将功能分配给Primefaces DataList子级 [英] Use JQuery to assign function to Primefaces DataList Children
问题描述
我正在尝试在Primefaces中创建可排序的jquery ui，并将html/jquery示例转换为primefaces jquery.我试图将sortable()函数添加到dataList中的每个元素.关于如何应用sortable()的任何想法(此函数在外部库中).
I'm trying to create a jquery ui sortable in Primefaces and convert my html/jquery example to primefaces jquery. I'm trying to add the sortable() function to each element within the dataList. Any ideas on how to apply the sortable() (this function is in an external library).
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>
素面尝试:
<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>
推荐答案
虽然迟了一点，但答案可能会有所帮助.
Although a little late, an answer may be helpful.
问题:jQuery的.sortable()函数尝试对所选对象的直接子元素进行排序.由于primefaces会在列表周围呈现一些div，因此您需要明确指向封闭的ul.
Problem: jQuery's .sortable() function tries to sort the direct child-elements of the selected object. Since primefaces renders some divs around your list, you need to point explicit to the enclosing ul.
解决方案:
<script type="text/javascript">
$(function() {
$( "#dreamModifyFrm:topTenGrd ul" ).sortable();
$( "#dreamModifyFrm:topTenGrd ul" ).disableSelection();
});
</script>
(请注意已修改的jQuery-Selector)
(Note the modified jQuery-Selector)
DataTable的等效行为.在那里，您需要通过"tbody"修改选择器
Equivalent behaviour for DataTable. There you need to modify the selector by "tbody"
这篇关于使用JQuery将功能分配给Primefaces DataList子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
