Kendo - KendoGrid (Jquery) 그리드(테이블) 생성 UI (1)

DB에 있는 정보를 가져와서 화면에 보여줘야 될 경우에 HTML에서는 Table 태그를 쓴다.

좀더 많은 기능을 간편하게 쓰기위해 DataTables나 toast-grid를 사용하는데, Kendo 에서도 Grid 라이브러리를 지원한다.

 

사용법은 다른 무료 라이브러리 들과 비슷한데, 개인적으로 Kendo UI가 훨씬 더 깔끔하다.

 

사용법을 알아보자.

 

<script>
    let data = [
        {ID: 1, Name: "Hanker", Date: "2024-06-21"},
        {ID: 2, Name: "김하나", Date: "2024-02-01"},
        {ID: 3, Name: "진호정", Date: "2024-01-31"},
        {ID: 4, Name: "강윤기", Date: "2024-04-22"},
        {ID: 5, Name: "진현강", Date: "2024-06-03"},
        {ID: 6, Name: "신정영", Date: "2024-02-13"},
        {ID: 7, Name: "마수리", Date: "2024-07-25"},
        {ID: 8, Name: "김강구", Date: "2024-01-17"},
        {ID: 9, Name: "국태환", Date: "2024-03-06"},
        {ID: 10, Name: "한석중", Date: "2024-05-21"},
        {ID: 11, Name: "하나로", Date: "2024-06-01"},
    ];


    var dataSource = new kendo.data.DataSource({
        data : data
    })

    $("#grid").kendoGrid({
        dataSource : dataSource,
        columns: [
            { field: "ID", title: "ID" },
            { field: "Name", title: "이름" },
            { field: "Date", title: "가입일" }
        ]
    })
</script>

 

 

데이터는 각 DB에서 select 해온 값들을 사용하겠지만, 편의상 텍스트로 데이터 만들었다.

위 코드를 보면 dataSource에 해당 data 맵핑 해주고, Id가 grid인 태그로 kendoGrid 적용을 해주었다.

columns 에는 field는 데이터의 key값을 매칭해서 value를 가져오고 title은 헤더 명(tr)이라고 보면된다.

간단하게 테이블을 만들 수 있다. 

 

밑에 화면을 보자

테이블이 잘 나왔다. 

하지만 개인공부하려고 하면 문제없겠지만, 실 프로젝트에서 이렇게 개발해놓고 완료했다고 하면 분명 문제가 생길거다.

 

다음 글에서는 이 Grid를 한번 보기좋게 바꿔보며, 기능들도 추가를 해보자

 

끝

 

 

https://demos.telerik.com/kendo-ui/grid/index?_gl=1*fq29ad*_gcl_au*NTEyMjMxMDA4LjE3MjExOTQ2Nzc.*_ga*NzYzNzI0MjY2LjE2ODUxOTYxMjQ.*_ga_9JSNBCSF54*MTcyNjg5MDc3OC4xMzAuMS4xNzI2ODkxNjY4LjU4LjAuMA..

Demo of core features in jQuery Grid widget | Kendo UI for jQuery