데이터그리드(Datagrid) 사용하기 - jQuery EasyUI

https://www.jeasyui.com/documentation/datagrid.php

datagrid - Documentation - jQuery EasyUI

1. Datagrid 란 무엇인가?

Datagrid 란 간편하게 데이터 값을 화면에 뿌려주는 도구라고 생각하면 된다.

css 로 간격 맞추고 그럴 필요 없이 적절한 코드만 써주면 얘가 알아서 화면에 테이블형식으로

값을 뿌려준다. 👍🏻

2. 어떻게 사용하는가?

자세한 사항은 위의 도큐먼트를 참고하도록 하자. 아래 기술한 내용은 본인이 직접 사용한 내용을 간추려서 적은 것이다.

(1) 기본 코드 골격

$('# table 아이디 또는 div 아이디').datagrid({
   url : 'Controller URL' , //Controller 의 RequestMapping URL 을 써주자! 
   width : '100%', 
   columns : [[ {
      field : ' Vo 필드명', title : '웹화면에서 뿌려줄 컬럼명',width: '10%' , align :'left'},
   ....... ]] 
 });

기타 사항이 궁금하다면 도큐먼트 - Properties 참고하자.

• 맨 첫번째 컬럼의 width값을 그냥 100 을 주고 그 아래 컬럼의 width의 총 합을 90%정도로맞춰주면 딱딱 맞게 나온다~

(2) reload, load METHOD

입력,수정,삭제 같은 기능을 후 datagrid를 새로고침하여 변경된 목록을 뿌려줘야할 때가 있다.

그때 위 두개의 메소드가 유용하다.

$('# table 아이디 또는 div 아이디').datagrid('reload') ; 
// ('reload',json) 이런식으로 값 던져줄 수 있다!
$('# table 아이디 또는 div 아이디').datagrid('load') ;

• reload : 현재의 page를 유지한 채 데이터를 load 한다.
• load : 처음 page 로 간다.
• 이 외에도 다양한 메소드가 있다. 상단 링크의 도큐먼트를 참고하자.

(3) 체크 박스 만들기

datagird에 컬럼으로 체크박스를 만들수도 있다!

{ field : 'ck', checkbox:true },
// 이런 식으로 필드값에 추가해주면 된다.
//datagrid에서 체크된 값은 getChecked에 담겨있다. 이런식으로 사용하자. 
var datagridGetChecked = $('# table 아이디 또는 div 아이디').datagrid('getChecked') ;

console.log로 찍어보면 알겠지만 datagridGetChecked는 배열로 row 값이 들어가있다.

그러니까 값을 뽑아올때 배열에서 값을 뽑아내듯 가져오면 된다.

예를 들면 datagridGetChecked[index].꺼내올 컬럼명 이런식으로!

이것을 응용하면 체크박스를 사용한 다중 delete도 쉽게 가능하다. ( javascript 부분에서 값던져줄때 편하다는 뜻이다~ ^^ ,  )

 

(4) Footer 달아주기

View단에서는 showFooter : true 옵션을 주면된다.

나의 경우 footer로 날릴 값을 쿼리로 가져와서 뿌려주는 형식으로 만들었다.

(5) Formatter

가져온 데이터를 datagrid에 뿌려줄 때 formatter를 사용하여 가공한 값을 보여줄 수 도있다.

예를 들면 % 나 원 같은 단위를 붙여줄 수도 있고 버튼을 달아줄 수도 있다.

var hello = function ( value , row , index ) { 
	retrun row+'% ';
}

이런 식으로 만들어서 아래 처럼 formatter를 사용하면 된다.

{ field : 'Hello', title : '안녕', width : '10%', align : 'left', formatter:hello}

 

자세한 사항은 도큐먼트의 formatter 부분을 참고하자!

 

============================================================================

도큐먼트의 Events 부분을 잘 활용하면 데이터가 로드되기 전, 후 등등 때에 이벤트를 사용해서 데이터를 가공해줄 수 있다.