XML/XSL로 작성된 HTML 테이블의 사용자 정의 필터링

Question

웹 개발에 익숙하지 않고 웹 사이트 방문자가 XML/XSL에 의해 생성 된 발행물의 HTML 표를 필터링하고 정렬 할 수있는 방법에 대해 고심하고 있습니다. . 서버 제약으로 인해 .php 또는 ASP.NET을 사용할 수 없습니다. 데이터는 플랫 파일로 유지되어야합니다.

<xml> 
    <records> 
    <record> 
     <contributors> 
      <author>Author 1</author> 
      <author>Author 2</author> 
      <author>Author 3</author> 
     </contributors> 
     <title>Publication Title</title> 
     <type>Publication Type</type> 
     <keywords>Multiple Keywords</keywords> 
     <year>1995</year> 
     <abstract>Abstract Text Here</abstract> 
    </record> 
    </records> 
</xml> 

그리고, 내 XSL :

<table id="cvPubs"> 
    <thead> 
     <tr> 
     <th>Authors</th> 
     <th>Title</th> 
     <th>Type of Publication</th> 
     <th>keywords</th> 
     <th>Year</th> 
     <th>Abstract</th> 
     </tr> 
    </thead> 
    <tbody> 
    <xsl:for-each select="descendant::record"> 
     <tr> 
     <td><xsl:value-of select="keywords" /></td> 
     <td><xsl:value-of select="contributors/*[position()]" /></td> 
     <td><xsl:value-of select="titles/title" /></td> 
     <td><xsl:value-of select="abstract" /></td> 
     <td><xsl:value-of select="titles/tertiary-title" /></td> 
     <td><xsl:value-of select="year" /></td> 
     </tr> 
    </xsl:for-each> 
    </tbody> 
</table> 

내가 keyword 필드에 드롭 다운 목록을 추가 할 것이며, 사용자 정의 여기에

은 기본 XML 파일의 구조 텍스트 입력란을 contributors 및 abstract 입력란에 추가하십시오.

XSL 파일은 테이블을 완벽하게 출력합니다. 필터와 정렬 기능을 구축하는 것이 가장 좋은 방법은 무엇인지 모릅니다. 테이블 정렬/필터링을위한 몇 가지 JavaScript 및 jQuery 스크립트를 시도했지만 제대로 작동하지 못합니다. 오류는 없지만 추가 된 기능은 없습니다.

모든 안내가 크게 감사하겠습니다. 읽어 주셔서 감사합니다!

Answer 1

나는 XSLT의 길을 계속 가면 피클을 먹을 것이라고 생각한다.

그래, 비교적 정적 인 단일 테이블 출력으로 변환으로 잘 작동했지만 이제는 XSLT가 점점 더 복잡해지고 유용성이 떨어지는 모든 종소리와 휘파람을 추가하려고합니다. 언어는 변환에만 사용되므로

서버 사이드 코드 없이도 문제가 발생하지 않으므로 클라이언트의 정렬 기능과이 페이지에서 필요로하는 다른 기능을 처리하기 위해 네이티브 javascript 라이브러리의 모든 기능을 사용하는 것이 좋습니다.

Ext JS이 마음에 들지만, Dojo 또는 YUI과 같은 다른 예도 있습니다.

찾고있는 구성 요소를 일반적으로 "그리드"라고합니다.

Ext JS에서 GridPanel을 구현할 수 있습니다. 또는 데이터에 500 개가 넘는 레코드가있는 경우 Buffered GridPanel을 사용합니다. 이는 표시되는 행에 대해서만 DOM을 렌더링하는 유사한 구현입니다.

희망이 유용합니다.