행의 끌어서 놓기가 datatable/datagrid를 primefaces합니까?

나는 primefaces datatable/datagrid를 사용하여 행을 끌어다 놓으려고합니다.하지만 primefaces의 문제입니다. primefaces datatable/datagrid의 드래그 앤 드롭을 jquery 또는 다른 써드 파티 api 플러그인과 통합하는 가장 좋은 방법입니다. suggesst 나에게 .행의 끌어서 놓기가 datatable/datagrid를 primefaces합니까?

출처

2013-06-05 tech2504

당신은 당신이 시도 것을 보여줄 수 있습니까? –

내 응용 프로그램의 datatables (primefaces)에서 알 수있는 한, 2 개의 주/모드가 있습니다. 정확한 단어가 아닐지 모르지만 나는 그걸로 머물러 있습니다. 첫 번째는 표시 전용이며 두 번째 편집입니다. (디스플레이에서는 이벤트가 발생하여 DDN이 작동하지 않습니다.) 편집시 선택성에 심각한 문제가 있습니다. 테이블의 가장자리에서 눌러야하고 행에 초점을 맞추기 위해 인라인 구성 요소가 연결되어 있지 않아야합니다. 따라서 드롭은 해당 영역에서 수행되어야하며 이벤트가 발생하는 경우에만 적절하게 수행되어야합니다. u가 예제를 보면 ... 아약스의 ondrop 이벤트가 실행되어 드롭 테이블에 포함될 데이터가 변경 되었기 때문에 모든 구성 요소가 외부 구성 요소 (패널 등)에 만들어지고 테이블이 업데이트됩니다. 그것은 데이터 증가를위한 마법 일지 모르지만 셀 또는 행 데이터를 재정렬하고 업데이트하는 것은 아닙니다. 그래서 primefaces 3.5.x까지 그 대답은 내가 당신이 그것을 얻을 수 있다고 생각하지 않는다 ... 나는 클라이언트 측을 실행하기 때문에 jquery로 할 수 있다고 생각하지 않니? 내가 전에 말했던 것을 사용하지 않기 때문에 확신 할 수 없다. 양식을 약간 재 작업해야 할 수 있습니다.

출처

2013-12-11 12:05:27 ckinfos

당신은 데이터 테이블 정렬 및 에 사용하지 않도록 선택 모드를 확인하기 위해 JSF 페이지에 일부 자바 스크립트 (JQuery와)를 추가해야합니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.ui-datatable tbody').sortable(); 
     $('.ui-datatable tbody').disableSelection(); 
    }); 

    function doReorder() { 
     var order = ''; 
     var len = $('.row').length; 
     $('.row').each(function (index) { 
      order += ($(this).text() + ((index == (len - 1)) ? '' : ';')); 
     }); 
     $('#order_q').val(order); 
     return true; 
    } 
</script>

이 데이터 테이블 구성 요소에 약간의 코드를 추가 doReorder() 방법은 행의 새로운 질서를 얻고 변수 order_q에 저장 아래에 나열된. styleClass 속성이 "row"로 설정된 값의 행 번호가있는 새 열이 표시됩니다. 실행 자바 스크립트 방법 doReorder()시에 갱신됩니다 숨겨진 변수 order_q이있다 :

<p:dataTable rowIndexVar="rowIndex" 
var="entry" value="#{myBean.list}" > 
<p:column headerText="#"> 
<h:outputText styleClass="row" value="#{rowIndex}"/> 
</p:column> 
... (other colums as you wish) 
</p:dataTable> 
<h:inputHidden id="order_q" value="#{myBean.order}"/> 
<p:commandButton value="Submit order" ajax="false" onclick="return doReorder()" action="#{myBean.reorder}"/>

여러분의 빈 클래스 (게터 물론 세터와) 문자열 필드 위해를 포함해야합니다. 변수 wil은 JavaScript의 값을 저장합니다. 목록의 새 순서 (Datatable 위젯의 소스 데이터)입니다. 우리는 또한 XHTML에 언급 된 방법을 구현해야 - 모든 사용자들은 "주문 제출"

public String reorder() { 
     Map < String, String > tmp = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap(); 
     String order = tmp.get("order_q"); 
     if (order != null && !order.isEmpty()) { 
      ArrayList <YourData> reordered = new ArrayList < >(); 
      for (String s: order.split(";")) { 
       try { 
        Integer i = Integer.parseInt(s); 
        YourData data = list.get(i); 
        reordered.add(data); 
       } catch (NumberFormatException nfe) {} 
      } 
      list = reordered; 
     } 
     return null; 
    }

를 버튼에서 작업을 처리 할 수 재정렬()를! 이제 드래그 & 드롭 기능을 사용하여 Datatable을 재정렬하고 버튼을 클릭하여 새로운 주문을 저장할 수 있습니다. 이런 식으로, 그냥 5.0의 DataTable 문서는 매개 변수 draggableRows을 볼 수 있습니다 Primefaces에