Whiteship's Note

YUI :: DataTable :: basic.html

JEDI/YUI : 2007.03.18 13:26


DataTable 예제들

이 중에서 Basic Table을 자세히 살펴 보겠습니다.

샘플코드 부분 날리고, Logger 부분을 날리고, CSS 부분도 날리면 다음과 같이 보입니다.
사용자 삽입 이미지

핵심 부분의 소스코드는 다음과 같습니다.
<script type="text/javascript">
var myColumnHeaders = [
    {key:"POID", abbr:"Purchase order ID", sortable:true, resizeable:true},
    {key:"Date", type:"date", sortable:true, resizeable:true},
    {key:"Quantity", type:"number", sortable:true, resizeable:true},
    {key:"Amount", type:"currency", sortable:true, resizeable:true},
    {key:"Title", type:"html", sortable:true, resizeable:true}
];

var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: ["POID","Date","Quantity","Amount","Title"]
};
var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet, myDataSource,{caption:"Whiteship: Basic Table"});
</script>

먼저 배열로 테이블의 헤더 부분을 지정하고, 그걸로 ColumnSet 객체를 만듭니다.
다음은 DataSource 객체를 만들고 몇가지 속성을 설정합니다.
마지막으로 위에서 만든 ColumnSet과 DataSource를 사용해서 DataTable객체를 만들면 됩니다.

'JEDI > YUI' 카테고리의 다른 글

YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
HTML 태그를 DataTable로  (0) 2007.03.19
YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: basic.html  (0) 2007.03.18
숙제  (0) 2007.03.17
Yahoo Wideget 개발 준비  (0) 2007.03.15
YUI(Yahoo! UI Library)  (0) 2007.01.22
top

TAG ,
JEDI/YUI : 2007.03.18 13:26 : Trackback ( 0 ) : Comments ( 0 )


: 1 : 2 : 3 : 4 : 5 : 6 : 7 : 8 : 9 :