slickgrid 기본 구성1

HTML

<div id="container">
    <div id="notice_grid" style="height:500px; width:100%;"></div>
    <div id="pager_notice" style="width:100%; height:20px;"></div>
</div>

슬릭그리드가 들어갈 곳에 태그작성.

 

 

 

 

script

var grid;
//표의 컬럼
var columns = [
    { id: "Seq", name: "No.", field: "SEQ", headerCssClass: 'text-center', cssClass: 'text-center', width: 100},
    { id: "Title", name: "제목", field: "TITLE", headerCssClass: 'text-center', width: 500 },
    { id: "Writer", name: "작성자", field: "WRITER", headerCssClass: 'text-center', cssClass: 'text-center', width: 200 }
];

//표의 옵션
var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    multiColumnSort: true,
    asyncEditorLoading: true,
    autosizeColsMode: true,
    forceFitColumns: true,
    SelectionMode: true
};


//데이터(json)
$(function () {
    $.getJSON('/Notice/getNoticeList', function (data) {

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

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

            var item = grid.getDataItem(args.row); //클릭한 행의 정보 item에 저장
            location.href = "/Notice/Details/" + item.SEQ; //해당 글의 상세페이지로 이동
        });
    });
});

1.컬럼 설정

id : 컬럼의 id

name : 화면에서 보여질 내용

field : 데이터랑 매칭되는 필드

headerCssClass : 헤더 css (text-center : 글자 가운데 정렬)

cssClass : 내용 css

width : 컬럼 너비

 

2.기본 옵션 설정

 

3.슬릭그리드 생성

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