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

참조 : 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 등을 지정했습니다.

    YUI :: DataTable :: basic.html

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

    YUI(Yahoo! UI Library)

    http://developer.yahoo.com/yui/
    위에서 javascript와 css를 제공해 줍니다. 구글이나 아마존에서 제공해 주는 공개 API와는 다르게 소스를 직접 다운로드해서 사용할 수 있습니다.

    http://developer.yahoo.com/yui/docs/ <- API

    주소록 프로그램에 유용해 보이는 몇가지 샘플들의 링크를 모아봤습니다.

    http://developer.yahoo.com/yui/examples/container/dialog/2.html
    새로운 멤버나 새로운 그룹 추가를 팝업으로 사용 가능.
    http://developer.yahoo.com/yui/examples/container/simpledialog/2.html
    정말 삭제 하시겠습니까? 또는 수정 하시겠습니까? 라는 팝업으로 사용 가능.
    http://developer.yahoo.com/yui/examples/menu/index.html
    메뉴 만들 때 사용 가능.
    http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
    탭뷰로 전체 멤버 보기, 전체 그룹 보기, 회원 추가, 멤버 추가 등의 메뉴 대용으로 사용 가능.
    http://developer.yahoo.com/yui/examples/tabview/transition.html
    탭 전환시 효과가 멋짐.
    http://developer.yahoo.com/yui/grids/#base_markup
    테이블 탬플릿을 위한 CSS를 제공해 줍니다.

    제공 되는 전체 서비스 보기
    [#M_ more.. | less.. |

    _M#]