Slick Grid 자바스크립트 표 라이브러리

 

https://slickgrid.net/

SlickGrid Home

https://github.com/6pac/SlickGrid/wiki

GitHub - 6pac/SlickGrid: A lightning fast JavaScript grid/spreadsheet

 

Slick Grid 는 자바스크립트, jQuery를 배경으로 한 클라이언트 단 Grid 오픈 소스다. 부트스트랩과 호환이 가능하다

 

what it is 

• a filtered Model (DataView) as a data source instead of a simple array
• grid reacting to model events (onRowCountChanged, onRowsChanged)
• FAST DataView recalculation and real-time grid updating in response to data changes.The grid holds 50'000 rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows.
• adding new rows, bidirectional sorting
• column options: cannotTriggerInsert
• events: onCellChange, onAddNewRow, onKeyDown, onSelectedRowsChanged, onSort
• NOTE: all filters are immediately applied to new/edited rows
• Handling row selection against model changes.
• Paging.
• inline filter panel

Getting Started

var slickgrid = new Slick.Grid(container, rows, columns, options);

var rows = [
    {
        field_1: "value1",
        field_2: "value2"
    }, {
        field_1: "value3",
        field_2: "value4"
    }
];

var columns = [
    {
        name: "Address",
        field: "address", 
        id: "address",  // In most cases field and id will have the same value.
        sortable: true //정렬
    }, 
    {
        name: "Rating, in %",
        field: "rating", // This and the following column read the same data, but can present it in a different way.
        id: "rating_percent",
        resizable: false
    }, 
    {
        name: "Rating, in stars",
        field: "rating",
        id: "rating_stars"
    }
];

columns 속성

• name - 표시되는 열 제목(이름)
• field - The field name used in the data row objects.
• id - An unique identifier for each column in the model, allowing to set more than one column reading the same field.
• resizable- 테이블을 뷰 상에서 변경하려고 할때 고정값으로 표시(false), 변경하고 싶으면 (true)
• sortable- 열제목 클릭시 정렬되는 기능 부여
• selectable- 클릭시 select option변경 기능 
• focusable - 클릭시 값 변경 가능 (기본값 : true ) , 변경 불가능은 false
• cssClasses(string)- css적용
• width
• minWidth
• maxWidth
• rerenderOnResize
• headerCssClass
• formatter- 글자 양식을 바꾸는 속성 (함수 사용) 
• editor- 셀 양식을 바꾸는 속성 (함수사용)