Используйте JQuery для назначения функции в Primefaces DataList Children - PullRequest
Новая
       29

Используйте JQuery для назначения функции в Primefaces DataList Children

0 голосов
/ 06 апреля 2011

Я пытаюсь создать пользовательский интерфейс jquery, который можно сортировать в Primefaces, и преобразовать мой пример html / jquery в 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>

Попытка простых лиц: 

<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>

1 Ответ

1 голос
/ 17 мая 2011

Хотя и с небольшим опозданием, ответ может быть полезным.

Проблема: функция .sortable () jQuery пытается отсортировать прямые дочерние элементы выбранного объекта.Так как простые лица отображают некоторые элементы div в вашем списке, вам нужно явно указать на включающий ul.

Решение: 

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

(обратите внимание на измененный jQuery-Selector)

Редактировать: Эквивалентное поведение для DataTable.Там вам нужно изменить селектор "tbody"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...