slickgrid 기본 구성2(dataview)

슬릭그리드 생성 시, 

new Slick.Grid(그리드 생성위치, 데이터, 컬럼, 옵션);

 

 

데이터 자리에 dataview를 넣으면, 데이터를 정렬, 필터링, 페이징 등 다양한 이벤트 처리할 수 있다.

//dataView
$(function () {
    var dataView = new Slick.Data.DataView({ inlineFilters: true }); //dataview 생성

    grid = new Slick.Grid("#myGrid", dataView, columns, options); //slickgrid 생성

	//페이징 처리
    dataView.setPagingOptions({ pageSize: 10 }); //10개씩 페이징 처리
    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager_notice")); //pager 생성

    dataView.onRowCountChanged.subscribe(function (e, args) {
        grid.updateRowCount();
        grid.render();
    });

    dataView.onRowsChanged.subscribe(function (e, args) {
        grid.invalidateRows(args.rows);
        grid.render();
    });

    GetNoticeList();

    //클릭이벤트
    grid.onActiveCellChanged.subscribe(function (e, args) {
        console.log(e, args);

        var item = grid.getDataItem(args.row);
        location.href = "/Notice/Details/" + item.SEQ;
    });
})

function GetNoticeList() {
    $.getJSON('/Notice/getNoticeList', function (data) {
        var View = grid.getData();

        View.beginUpdate();
        View.setItems(data, "SEQ"); // SEQ 기준으로 데이터 세팅
        // 여기에 view 변경 코드 작성
        View.endUpdate();
        View.reSort(); //정렬

        grid.invalidate(); //그리드 무효화
        grid.render(); //그리드 랜딩
    })
}