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객체를 만들면 됩니다.