ColumnSet

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

백기선

• 2 min read

참조 : 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 태그 중에 하나[footnote]참조를 해보니 축약어에 대한 설명을 달 때 사용하는 태그 였습니다.[/footnote] 였군요. 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 등을 지정했습니다.

    Sign up for more like this.

    Enter your email
    Subscribe