Grid (with datatable)

Grid 컴포넌트의 구조와 사용법을 설명합니다. Grid 컴포넌트는 jquery DataTables라이브러리를 사용하였으며 컴포넌트에서 제공하는 기능 외에도 jquery DataTables의 옵션을 그대로 사용할 수 있도록 구성되어 있습니다. jquery DataTables의 사용법은 jquery DataTables문서를 참고하십시오.

기본 코드

<div id="gridArea"></div>

var grid = Nue.component('grid', options);

Options

{
    el: '#gridArea',          // Grid 영역 DOM Selector
    model: Nue.model(),       // Grid의 Data Model 객체
    columns:[],               // Grid Column Data,
    pager: true,              // pagination 기능 사용여부
    autoRender: true          // Model에서 fetch완료시 자동으로 rendering하는 옵션
    ...DataTables options...
}

Rendering

Component를 생성 후 model data와 columns option data를 적용하여 rendering합니다.

columns data로 column과 model data를 연결합니다. 구성은 다음과 같습니다.

[{ 
    key: ${model data property(string)}, // data 연결 property
    title: ${column title(string)},      // column title
    width: ${column width(string)},      // column width값
    sort: ${isSortable(boolean)},        // 정렬 여부(기본값은 false)
    class: ${className(string)}          // column에 추가할 className
}]

기본 Rendering

기본 로컬 data 적용

var grid = Nue.component('grid', {
    el: '#gridArea',
    columns: [
        { key: 'id', title: '아이디' },
        { key: 'name', title: '이름' },
        { key: 'date', title: '날짜' }
    ]
});

// model.set()
grid.model.set([
    { id: '1000', name: 'Luna', date:'2017-03-01' },
    { id: '1001', name: 'Mike', date:'2017-03-02' }
]);

Ajax Model Rendering

model이 ajax로 fetch하여 가져오는 response data 적용

var grid = Nue.component('grid', {
    el: '#gridArea',
    columns: [
        { key: 'id', title: '아이디' },
        { key: 'name', title: '이름' },
        { key: 'date', title: '날짜' }
    ],
    model: Nue.model({ url: '/api/lists' }) // ajax model binding
});

/**
 * model fetch후 완료시 자동 data setting 및 rendering
 * response data 예시
 * [{ id: '1000', name: 'Luna', date:'2017-03-01' },
 *  { id: '1001', name: 'Mike', date:'2017-03-02' }]
 */
grid.model.fetch();

자동 Rendering 끄기

자동 Rendering끄기는 model이 ajax로 가져오는 data인 경우 rendering시점을 사용자가 조절하고 싶을 때 사용합니다. 이 옵션을 끄면 model에서 fetch완료 시 자동으로 rendering을 하지 않으며, 사용자가 임의로 render() 명령을 내리면 그때 rendering을 합니다.

// model fetch후 완료시 수동으로 render()
var grid = Nue.component('grid', {
    el: '#gridArea',
    columns: [
        { key: 'id', title: '아이디' },
        { key: 'name', title: '이름' },
        { key: 'date', title: '날짜' }
    ],
    model: Nue.model({ url: '/api/lists' }), // model binding
    autoRender: false    // 자동 rendering off
});

grid.model.fetch().then(function(){
    setTimeOut(function(){
        grid.render();
    },1000);
});

데이터 가져오기

Component model의 getJSON() 메소드를 사용합니다. model의 사용법은 Model문서를 확인하십시오.

Destroy

Component의 model과 view의 모든 데이터를 default설정으로 초기화 합니다.

// Component 생성
var grid = Nue.component('grid', { ...options...});
// Component 초기화.
grid.destroy(); //-> DOM과 model data모두 초기화

DOM Selector 및 DataTables 객체 접근

생성된 Component는 $el, $table, DataTables 의 키워드로 각각 DOM과 DataTables객체에 접근할 수 있습니다.

var grid = Nue.component('grid', { el: '#gridArea' });

grid.$el //-> grid영역 DOM Selector $('#gridArea');
grid.$table //-> grid영역에 생성되는 table DOM Selector $('#gridArea').find('table');
grid.DataTable //-> 생성된 DataTables 객체 $('#gridArea').find('table').DataTable();