2014-12-23 2 views
1

Ну, я хочу сделать что-то подобное с помощью PrimeFaces, но я не знаю, как поставить кнопку рядом с моим <f:selectItems>, чтобы удалить этот элемент.Удалить кнопку в p: selectOneMenu

Selectonemenu with a remove button in every selectitems

<p:selectOneMenu id="pesquisaSalva" 
       rendered="#{!mapaEleitoralControl.desabiliarRadioPesquisaSalva}" 
       disabled="#{mapaEleitoralControl.desabiliarRadioPesquisaSalva}" 
       value="#{mapaEleitoralControl.parametrosPesquisaSalva}" 
       var="teste"> 

    <f:selectItem itemLabel="Selecione a pesquisa salva" 
        itemValue="" 
        noSelectionOption="true" /> 

    <f:selectItems value="#{mapaEleitoralControl.listaPesquisaSalvasMapaEleitoral}" 
        var="pesquisaSalvaME" 
        itemValue="#{pesquisaSalvaME.anoEleicao}" 
        itemLabel="#{pesquisaSalvaME.anoEleicao}"/> 

    <p:column> 
     #{teste} 
    </p:column> 

    <p:column> 
     <p:commandButton id="iconOnly" icon="ui-icon-trash" title="Icon Only" /> 
    </p:column> 

    <p:ajax event="change" 
      update="mapaEleitoralForm" 
      global="false" 
      listener="#{mapaEleitoralControl.selectPesquisaSalvaGerarMapa}" /> 
</p:selectOneMenu> 
+0

Не так ли текст слева и пылесборник справа в данной картинке выстроились правильно? Они кажутся стоять бок о бок правильно. – Tiny

+0

Да, они есть, эта фотография просто для иллюстрации того, что я хочу делать. –

+0

За исключением '', я никогда не пробовал '' внутри ''. Выполняет ли это '' внутри заданного ''? Вы попробовали это в своем реальном коде? – Tiny

ответ

0

мне пришлось решать ту же проблему. Я сделал это так (могут быть лучшие способы).

<p:selectOneMenu styleClass="bookMarkMenu" id="bookmarkMenu" value="#{bean.bookmark}" var="bookmark" style="width:150px;" converter="#{entityConverter}" panelStyle="width:300px;"> 
          <f:selectItem itemLabel="#{messages['bookmark.select']}" itemVaule=""/> 
          <f:selectItems value="#{bean.bookmarks}" var="b" itemLabel="#{b.description}" itemValue="#{b}"/> 
          <p:column style="width:100px;"> 
           <h:outputText style="padding-left:8px;" value="#{bookmark.description}" rendered="#{bookmark ne null}"/> 
          </p:column> 
<p:column style="width:15px; padding:0px;"> 
          <p:commandLink style="padding: 4px 10px 4px 10px;" onclick="deleteCalled(event,#{bookmark.bookmarkId});"><i class="fa fa-trash-o" aria-hidden="true"></i></p:commandLink> 
         </p:column> 

         <p:ajax event="itemSelect" listener="#{bean.onBookmarkSelect}"/> 
        </p:selectOneMenu> 

Проблема с добавлением р: commandLink (или кнопки) в одном из р: столбцы является то, что слушатель для выбора элемента по-прежнему будет вызван. Вот почему я вызываю метод javascript deleteCalled onclick.

<p:remoteCommand name="deleteBookmark" action="#{bean.deleteBookmark()}" update="#{p:component('bookmarkDec')}"/> 

    <script> 
     function deleteCalled(event,id){ 
      event.stopPropagation(); 
      if(confirm('Do you really want to delete the bookmark?')){ 
       deleteBookmark([{name:'bookmarkId',value: id}]); 
      } 
      return false; 
     } 

    </script> 

В этом методе javascript необходимо остановить распространение события, а затем вызвать p: remoteCommand. В этом случае я передал идентификатор закладки (мои объекты в списке).

Надеюсь, что это поможет.