함께 YUI의 TreeView와 DataTable을 사용»야후 사용자 인터페이스 블로그 (YUIBlog)

함께 YUI의 TreeView와 DataTable을 사용하여

카를로스에 의해 오후 5시 33분에 2009년 10월 12일 잘된 |에 개발 | 4 개의 댓글

당신이 복잡한 계층 구조와 속성 목록의 두 현재를 원할 경우 TreeView 및 하여 DataTable의 에서 컨트롤 YUI이 잘 함께 작동합니다.

이 도움말 위해 우리는 웹 서버 로그 브라우저를 만들 것입니다. TreeView는 파일 및 폴더 경로를 표시하고, DataTable의 개별 로그 라인을 표시합니다. 트리에서 파일 또는 폴더를 클릭하면 DataTable의가하지만 그 경로를 모두 걸러집니다. ( 작업 데모를 보시려면 여기를 클릭하십시오 .)

짧음을 위해 나는 정적 데이터를 사용합니다. 연습에서는 자세한 동적 데이터 기술이 사용할 수 여기 와 여기 와 서버에서 필터링을 할. 예를 들어 정적 후, 우리는거야 자세히 동적 데이터에 대해 이야기 .

에 관심을 지불하는 비트 TreeView의 사이의 결합이다 labelClicked 이벤트와 데이터 소스의 sendRequest() 방법입니다. (당신은이 예제에 대한 모든 종속성 찾을 수 YUI 2 Configurator를 .)

 <- 콤보 - 처리 YUI CSS 파일 : ->
 <링크 REL = "스타일 시트"유형 = "텍스트 / CSS"
 <- 콤보 - 처리 YUI JS 파일 : ->
 <스크립트 유형 = "텍스트 / 자바 스크립트" 

 <-! TreeView 및 DataTable의에 대한 컨테이너 DIVs 만들기 ->
 <body class="yui-skin-sam">
   <table>
   <tr>
     <td valign="top">
     <div id="myTree" style="width:160px"> </ 사업부>
     </ TD>
     <td valign="top">
     <div id="myContainer"> </ 사업부>
     </ TD>
   </ TR>
 </ TABLE>
 </ BODY>

 <SCRIPT>
 YAHOO.util.Event.addListener (창, "로드"
 함수 () {

   /**** DataTable의 ****/

   / /는 DataTable의 열 정의
   var에 myColumnDefs = [
     {키 : "IP", 레이블 : "IP 주소"},
     {키 : "경로", 레이블 : "경로"},
     {키 : "상태", 레이블 : "상태"},
     {키 : "밀리초", 레이블 : "시간"},
     {키 : "바이트", 레이블 : "크기"},
     {키 : "TS", 레이블 : "기록"}
   ];

   / / 테이블에 더미 데이터입니다.
   var에 myData = [
     {TS : IP '2009년 10월 10일 14시 33분 26초': '1 .2.3.4 ', 경로'/ favicon.ico ', 상태 : 200, 밀리초 : 123, 바이트 : 616}
     {TS : '2009년 10월 10일 14시 33분 26초', IP : '1 .2.3.4 ', 경로'/ 이미지 / logo.gif ', 상태 : 200, 밀리초 : 213, 바이트 : 7,891}
     {TS : '2009년 10월 10일 14시 33분 26초', IP : '1 .2.3.4 ', 경로'/ 이미지 / welcome.gif ', 상태 : 200, 밀리초 : 872, 바이트 : 19357}
     {TS : IP '2009년 10월 10일 14시 33분 26초': '1 .2.3.4 ', 경로'/ index.html 페이지 ', 상태 : 200, 밀리초 : 901, 바이트 : 13453}
     {TS : '2009년 10월 10일 14시 33분 27초', IP : '4 .5.6.7 ', 경로'/ favicon.ico ', 상태 : 304, 밀리초 : 110, 바이트 : 616}
     {TS : '2009년 10월 10일 14시 33분 27초', IP : '4 .5.6.7 ', 경로'/ 이미지 / logo.gif ', 상태 : 304, 밀리초 : 432, 바이트 : 7,891}
     {TS : '2009년 10월 10일 14시 33분 27초', IP : '4 .5.6.7 ', 경로'/ 이미지 / welcome.gif ', 상태 : 304, 밀리초 : 528, 바이트 : 19357}
     {TS : IP '2009년 10월 10일 14시 33분 27초': '4 .5.6.7 ', 경로'/ index.html 페이지 ', 상태 : 304, 밀리초 : 562, 바이트 : 13453}
     {TS : IP '2009년 10월 10일 14시 33분 28초': '3 .4.5.6 ', 경로'/ favicon.ico ', 상태 : 200, 밀리초 : 313, 바이트 : 616}
     {TS : IP '2009년 10월 10일 14시 33분 28초': '3 .4.5.6 ', 경로'/ 이미지 / logo.gif ', 상태 : 200, 밀리초 : 215, 바이트 : 7,891}
     {TS : IP '2009년 10월 10일 14시 33분 28초': '3 .4.5.6 ', 경로'/ 이미지 / welcome.gif ', 상태 : 200, 밀리초 : 324, 바이트 : 19357}
     {TS : IP '2009년 10월 10일 14시 33분 28초': '3 .4.5.6 ', 경로'/ index.html 페이지 ', 상태 : 200, 밀리초 : 818, 바이트 : 13453}
     {TS : IP '2009년 10월 10일 14시 33분 29초': '7 .8.9.5 ', 경로'/ favicon.ico ', 상태 : 200, 밀리초 : 786, 바이트 : 616}
     {TS : IP '2009년 10월 10일 14시 33분 29초': '7 .8.9.5 ', 경로'/ 이미지 / logo.gif ', 상태 : 200, 밀리초 : 604, 바이트 : 7,891}
     {TS : IP '2009년 10월 10일 14시 33분 29초': '7 .8.9.5 ', 경로'/ 이미지 / welcome.gif ', 상태 : 200, 밀리초 : 803, 바이트 : 19357}
     {TS : IP '2009년 10월 10일 14시 33분 29초': '7 .8.9.5 ', 경로'/ index.html 페이지 ', 상태 : 200, 밀리초 : 934, 바이트 : 13453}
   ];

   / / 해당 필드 데이터 원본 정적 "JSARRAY"를 만듭니다.
   ; var는 = 새로운 YAHOO.util.DataSource (myData)을 myDataSource
   myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
   myDataSource.responseSchema = {
     분야 : [ 'IP', '경로', '상태', '밀리초', '바이트', 'TS']
   };

   / / 언제 시간 sendRequest은 ()라고 불리는 것입니다 필터 함수를 만듭니다.
   / / 누구의 경로를 지정된 접두사와 일치 단 결과를 반환합니다.
   myDataSource.doBeforeCallback = 기능 (경로, 원료, RES) {
     var에 데이터 = res.results | | [];
     var에 필터링 = [];
     경우 (경로) {
       에 대한 (var에 나는 = 0; 나는 <data.length, I + +) {
         경우 (데이터 [전]. path.indexOf (경로) === 0) {
           filtered.push (데이터 [I]);
         }
       }
       res.results은 = 필터링;
     }
     RES를 반환;
   };

   / /는 HTML 요소, 열 defs를 지정된 DataTable의 인스턴스를 만들고 데이터 소스.
   var에 myDataTable = 새로운 YAHOO.widget.DataTable ( "myContainer"myColumnDefs, myDataSource);

   /**** TreeView의 ****/

   폴더와 일부 파일을 설명하는 / / 더미 트리 데이터를.
   var에 myTreeData = [
     {이름 : '이미지', 어린이 : [
        {이름 : 'logo.gif'}
        {이름 : 'welcome.gif'}
      ]},
     {이름 :는 'index.html'}
     {이름 : 'favicon.ico'}
   ];

   var에 myTree = 새로운 YAHOO.widget.TreeView ( "myTree");

   / 트리 데이터를 / 재귀는 노드를 만들 수 있습니다.
   / / 파일 및 폴더의 두 번째 수준을 확장하고 있지만, 나머지는 숨겨진 유지.
   함수 buildNodes (parentNode, treeData, parentPath, 확장) {
     에 대한 (var에 나는 = 0; 나는 <treeData.length, I + +) {
       var에 nodeData = treeData [I];
       var에 노드 = 새로운 YAHOO.widget.TextNode (nodeData.name, parentNode, 확장);

       / / 나중에 참조할 수 있도록 노드의 전체 경로를 구축합니다.
       node.path = parentPath + '/'+ node.label;

       이 노드에 자식이있다면 아래 / / 재귀.
       경우 (nodeData.children) {
         buildNodes (노드, nodeData.children, node.path, 허위);
       }
     }
   }
   buildNodes (myTree.getRoot () myTreeData, '진정한);

   / / 트리 노드가 클릭하면 DataTable의의 레코드를 필터링
   의 데이터 원본 sendRequest () 메소드에서 농담으로 / /.
   myTree.subscribe ( "labelClick"기능 (노드) {
     myDataSource.sendRequest (node.path {
       성공 : myDataTable.onDataReturnInitializeTable,
       실패 : myDataTable.onDataReturnInitializeTable,
       범위 : myDataTable,
       인수 : myDataTable.getState ()
     });

   });

   myTree.draw ();

 });

 </ SCRIPT>

동적 데이터와 TreeView 및 DataTable을 사용하여

동적 데이터, 서버 쪽 매김하고있는 DataTable로 정렬을 사용하려면 이 예제를보세요 . TreeView에서 동적 데이터를 사용하려면 이 예제를 참조하십시오 . 에 loadNodeData 기능이에게 전화를 추가할 수 있습니다 myDataSource.sendRequest() 이렇게 :

   / / 주어진 경로를 일치 로그를 반환합니다 서버쪽 호출을 구축
   var에 nodePath = encodeURIComponent (node.path);
   var에 requestString = '경로 ='+ nodePath + '& 정렬 = TS & DIR = 오름차순 & startIndex = 0 & 결과 = 25';

   sendRequest ()를 사용 데이터 소스에서 / / 찌르지
   var에 oCallback = {
     성공 : myDataTable.onDataReturnSetRows,
     실패 : myDataTable.onDataReturnSetRows,
     범위 : myDataTable,
     인수 : myDataTable.getState ()
   };
   myDataSource.sendRequest (requestString, oCallback);

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

4 개의 댓글

이것은 우리가 우리 제품에 꽤 의존 무언가이다, 난 그냥 YUI의 awesomeness에서 최고의 디스플레이 믿습니다. 우리는 특별한 재미 기능을위한 나무와 테이블 모두에 상황에 맞는 메뉴를 추가합니다. 우리는 검색 / 검색 / 관리하기위한 기록의 수백만을 가지고 시스템과 고객을 가지고 있고, YUI는 우리가 사용할 수 있도록 돕고있다. 멋지다.
2009년 10월 12일 - 브라이언 Holub에 의해 코멘트 #
그러면, 내가 asp.net MVC를 사용라고하고 나는보기로 JSON 데이터를 아래로 밀어.
그러면 가장 좋은 방법은 무엇입니까 :
; var는 = 새로운 YAHOO.util.DataSource (myData)을 myDataSource
나는 서버측 태그를 넣어 것은 자바 스크립트 오른쪽이 가능합니다 생각하지 않니?
즉.
var는 = 새로운 () YAHOO.util.DataSource을 myDataSource;
가자 Model.ToJson 정확히 'myData가'무엇을 제공하고 여기에 가정합니다.
제가 서버에서 자바 스크립트에 대한 이해 'melding'이 데이터를 통해 얻을 수있다면 그것이 '컨트롤'를 사용하는 방법을 이해 먼 길을 갈 것입니다.
(여러분이 원한다면 나에게 이메일)
좋은 게시물 - 감사합니다!
에 의해 코멘트 스티브 - 2009년 10월 26일 #
그것은 해당 게시물의 거리 내 서버 태그를했습니다 :)
내가 전화를 데이터 원본에 서버측 태그를 사용 ViewData.Model 합격 보여주려고했는데
에 의해 코멘트 스티브 - 2009년 10월 26일 #
다른 요청을 생성 필터링을 방지하는 방법이 있나요? 난 그저 다음 테이블과 트리를 구축하기 위해 초기 요청에 다른 페이지에서 데이터의 더미를 잡으려하고 테이블을 변경 나무를 클릭합니다.
조에 의해 코멘트 - 2010년 3월 17일 #

죄송합니다, 코멘트 양식이 시간에 문을 닫습니다.

에서 제공하는 워드 프레스 에서 야후! 웹 호스팅 .

야후 블로그 사용자 인터페이스 (YUIBlog)

함께 YUI의 TreeView와 DataTable을 사용하여

동적 데이터와 TreeView 및 DataTable을 사용하여

4 개의 댓글

트위터에서 YUI 라이브러리

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

댓글 정책

야후되기

메타 :

야후 블로그 사용자 인터페이스 (YUIBlog)

함께 YUI의 TreeView와 DataTable을 사용하여

동적 데이터와 TreeView 및 DataTable을 사용하여

4 개의 댓글

트위터에서 YUI 라이브러리

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

Blogroll

댓글 정책

야후되기

메타 :