JsGrid dataload

jsGrid 라는 잘 사용되지 않는 기능.

 

jqeury기반으로 이루어진 gird 를 그리는 플러그인이다. 데이터 바인딩, 정렬, 필터링, 페이징 등 다양한 기능이 기본적으로 제공되고 js로 이루어져 있다보니 쉽게 커스텀할 수 있다는 장점이 있다. 다른 쓰기 좋은 플러그인이나 기능을 가진 외부 프레임워크들도 많지만, 특별한 기능이 필요 없다면 jsgrid로 가볍게 그리는 것도 나쁘지 않아 보인다.

 

jsgrid는 jqury기반이기 때문에 jquery가 필수이며, jsgrid를 따로 로드해주어야 한다. (스크립트 로드 동일방법)

 

간단한 사용 방법은 아래와 같다.

 

$("#jsGrid").jsGrid({
    height: "500px",
    width: "100%",
    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    data: db.clients,
    fields: [
        { name: "Name", type: "text", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select", items: db.countries, valueField: "Name", textField: "Name" },
        { type: "control" }
    ]
});

 

id="jsGrid"를 대상으로 Grid를 그리는 코드이다. 가볍게 편집, 정렬, 페이징을 true false로 조작이 가능하고, 크기들을 지정할 수 있다.

 

data : 부분이 바로 grid를 그릴 데이터를 지정하는 항목이고,

fields : 부분이 각 컬럼들의 이름, 타입, 크기 등등을 지정할 수 있는 항목이다.

 

기본적으로 data 값과 fields의 name 값이 바인딩되어 표시되기 떄문에 이름만 맞추어 준다면 굉장히 손쉽게 grid table이 그려진다.

 

그 밖에도

 

rowClick, rowDubleClick 라거나, controller로 동작정의를 한다거나, lodaData를 통해 외부에서 다시 data를 불러오는 행위

( 버튼을 눌렀을 경우 로드하는 경우 등등 )

 

그 밖에도 여러가지 확장기능이 있으나, 공식문서를 제외하면 대부분 정보가 없다싶이하다.

 

국내에서는 잘 안쓰이는 듯?

 

https://js-grid.com/

Lightweight Grid jQuery Plugin

 

jsgrid를 검색하면 나오는 공식문서.

 

이럴때는 공식문서가 대부분 답지 역할을 한다.