2010-04-24 3 views
0

현재 테이블 데이터에 displaytag를 사용하고 있지만 "kayak.com"인터페이스를 만들고 싶습니다. 사용자가 행을 클릭하면 해당 탭에 대한 자세한 정보가 표시됩니다. 페이지 새로 고침이없는 특정 행displaytag에 드롭 다운 행 만들기

클릭하면 세부 행 1에 링크 예를 들어, 이전 :

ROW1 | COL1 | COL2 | COL3 | col4 | 상세
ROW2 | COL1 | COL2 | COL3 | col4 | 상세
row3 | COL1 | COL2 | COL3 | col4 | 상세

클릭 후 :

ROW1 | COL1 | COL2 | COL3 | col4 | 상세
-------- row1Detail ----------- ----
row2 | col1 | col2 | col3 | col4 | 세부 사항 row3 | col1 | col2 | col3 | col4 | 세부 사항

나는 이것을 할 장식자를 사용하여 시험해 보았다. javascript는 실행되지만 렌더링 된 열에 만 반영됩니다. displaytag의 페이지 매김 및 정렬에 영향을주지 않는 데이터를 사용하여 새 행을 삽입하려고합니다.

예 :

public class CustomDecorator extends TableDecorator { 
    public String getDetailsRow() { 
     MyObject object = (MyObject)this.getCurrentRowObject(); 
     return "<a onClick=\"myjsfunction(object.getId()); return true\">Details</a>"; 
    } 
} 

이 ... 그리고 JSP에서 나는 detailsRow 속성이 표시 사이에 중첩 것 : 테이블 태그 : 새 행을 삽입하는 방법에 대한

<display:column property="detailsRow" sortable="false" /> 

모든 팁 정확히? 해결책은 자바 스크립트가 쓰여지는 방식 일 수 있습니다 - 저는 자바 전문가가 아니므로 모든 팁을 높이 평가할 것입니다. displaytag를 사용하여 더 좋은 방법이 있습니까? displaytag가 javascript와 ("onclick"매개 변수와 같이) 명시 적으로 통합되는 것을 알지 못합니다.

이 질문은 stackoverflow, btw의 첫 번째 질문입니다. 자세한 정보가 필요한지 알려주세요.

답변

1

죄송합니다 오래된 질문을 드래그 할 수 있지만, 사람이로 실행 넣다 여기에 가능한 솔루션입니다 :

그들은 당신이 원하는처럼 엄청 많이 소리 예를 들어 있습니다. TableDecorator을 재정의하는 경우 finishRow 메서드를 재정 의하여 내용 행을 반환하십시오. 그런 다음 당신은 그냥 설정하는 세부 항목에 대한 몇 가지 자바 스크립트가 각 행이 테이블에 기록 된 후에이 방법은 실행되므로, 각각의 실제 행에 대해, 당신은 그것을

public String finishRow() { 
    return "<tr id='row1Details' style='visibility: collapse'><td colspan='500'>My Details</td></tr>"; 
} 

의 세부 숨겨진 행을해야합니다 보이는 행에 숨겨진 행.

편집 : 추가 세부 정보 :

새로운 자바 스크립트 함수를 추가

function displayDetails(id) { 
    document.getElementById(id + 'details').style.visibility = 'visible' 
} 

그리고 일반 행과 같이 보일 것이다 : 제안에 대한

<tr id='row1'><td> .... </td><td><a href="#" onClick="displayDetails('row1')">Details</a></td></tr> 
+0

흥미 롭다 - 정확히 내가 필요한 방법. 잠시 후에 이것을 시도 할 것입니다. 숨겨진 행의 자바 스크립트를 도울 수 있습니까? 요소 ID를 가져 와서 row.style.display를 'none'으로 설정하면됩니다. – bphilipnyc

+0

자바 스크립트 기능을 조금 더 확장했습니다. – jmo

+0

매력처럼 작동합니다! – bphilipnyc

0

이것이 도움이 될지 확실하지 않지만 나는 DataTables.net의 큰 팬입니다. jQuery를 기반으로하지만 매우 강력합니다. Row Details

+0

감사합니다,하지만이 것 현재의 셋업 (큰 DB 테이블, 커스텀 Hibernate 쿼리 등)이 주어지면 할 일이 많을 것이다. 엄청난 양의 js 코드를 유지하려고하지 않습니다. – bphilipnyc

관련 문제