Whiteship's Note

YUI :: DataTable :: ColumnSet 객체 만들기

JEDI/YUI : 2007.03.18 13:44


참조 : http://developer.yahoo.com/yui/datatable/

ColumnSet 의 생성자는 객체의 배열을 받는데 각각의 객체는 DataTable의 맨 위에 해당하는 <TH> 엘리먼트를 나타냅니다.

var myColumnHeaders = [
    {key:"name", text:"Dog's Name"},
    {key:"breed", text:"Dog's Breed"},
    {key:"age", text:"Dog's Age (in Weeks)", type:"number"}
];

var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
myColumnHeaders는 배열이고 이 배열을 ColumnSet의 생성자에 넣습니다. 배열의 요소는 Column객체를 나타내며 Column에 지정할 수 있는 속성으로 다음과 같은 것들이 있습니다.

  • abbr - String :: Column head cell ABBR for accessibility.
  • children - Object[] :: Array of object literals that define children (nested headers) of a Column.
  • className - String :: Custom CSS class to be applied to every cell in the Column.
  • currentlyAsc
  • editor - String :: Defines the type of editor for Column, otherwise Column is not editable.
  • formatter - HTMLFunction :: Defines a custom format function for Column, otherwise default is used, according to Column type.
  • key - String :: Associated database field, or null.
  • resizeable - Boolean :: True if Column is resizeable, false otherwise.
    Default Value: false
  • sortable - Boolean :: True if Column is sortable, false otherwise.
    Default Value: false
  • sortOptions.ascFunction - Function :: Custom sort handler to arrange Column in ascending order.
    Default Value: null
  • sortOptions.descFunctio - Function :: Custom sort handler to arrange Column in descending order.
    Default Value: null
  • text - String :: Text or HTML for display in Column's assocated TH element.
  • type - String :: Data types: "string", "number", "date", "currency", "checkbox", "select", "email", "link".
    Default Value: "string"
  • width - String :: Column width

  • abbr이 뭐죠? 흠.. html 태그 중에 하나[각주:1] 였군요. currentlyAcs 속성에 관한건 API에서 찾을 수가 없었습니다. 이 속성들은 다른 예제 코드들을 보면서 차차 익혀가야겠습니다. 흐흐;;

    이전 글에서 보았던 basic.html에 있던 코드의 일부를 다시 보겠습니다.
    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);

    ColumnSet의 생성자에 넣을 배열의 요소들은 각각이 Column객체이며 그 객체의 속성으로 key, abbr, sortable, resizeable, type 등을 지정했습니다.
    1. 참조를 해보니 축약어에 대한 설명을 달 때 사용하는 태그 였습니다. [본문으로]

    '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




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