Question

我正在尝试在Primefaces中创建一个可排序的jquery ui，并将我的html / jquery示例转换为primefaces jquery。我正在尝试将sortable（）函数添加到dataList中的每个元素。关于如何应用sortable（）的任何想法（此函数在外部库中）。

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>

Answer 1

虽然有点晚，但答案可能会有所帮助。

问题：jQuery的.sortable（）函数尝试对所选对象的直接子元素进行排序。由于primefaces会在列表周围呈现一些div，因此需要明确指出封闭的ul。

解决方案：

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

（注意修改后的jQuery-Selector）

编辑：DataTable的等效行为。你需要通过“tbody”修改选择器

使用JQuery为Primefaces DataList Children分配函数

1 个答案: