YUI :: DataTable :: basic.html
JEDI/YUI : 2007. 3. 18. 13:26
DataTable 예제들
Basic Table From Existing Markup Custom Cell Formatting Nested Headers Custom Sorting Pagination over XHR Scrolling Row Selection Inline Editing Integration with ContextMenu Complex Table
이 중에서 Basic Table을 자세히 살펴 보겠습니다.
샘플코드 부분 날리고, Logger 부분을 날리고, CSS 부분도 날리면 다음과 같이 보입니다.
핵심 부분의 소스코드는 다음과 같습니다.
먼저 배열로 테이블의 헤더 부분을 지정하고, 그걸로 ColumnSet 객체를 만듭니다.
다음은 DataSource 객체를 만들고 몇가지 속성을 설정합니다.
마지막으로 위에서 만든 ColumnSet과 DataSource를 사용해서 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>
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 |
