[jQuery] jqxgrid 기본구조

jqxgrid는 jQuery 기반의 상용 그리드 위젯이다.

웹사이트에서 다량의 데이터를 정렬, 집계, 필터 등을 활용하여 정리하여 볼 수 있고, 오픈소스 그리드에 비해 강력한 퍼포먼스를 가지고 있다.

 

---

Jqxgrid 기본구조 살펴보기

<script>
$(document).ready(function () {  
 // json 형태의 data를 만들어 준다.  
 // grid 안에 셋팅될 값들이다.  
 var data = '[{  
 "CompanyName": "Alfreds Futterkiste",  
 "ContactName": "Maria Anders",  
 "ContactTitle": "Sales Representative",  
 "Address": "Obere Str. 57",  
 "City": "Berlin",  
 "Country": "Germany" }  
 ]';  

 // 데이터 타입, 필드, 셋팅할 데이터를 설정한다.  
 var source =  
 {  
 datatype: "json", // json 형태의 데이터를 셋팅할 것이고.  
 // 각필의 이름과 타입은 datafields에 마찬가지로 json 형태이다.  
 datafields: [  
 { name: 'CompanyName', type: 'string' },  
 { name: 'ContactName', type: 'string' },  
 { name: 'ContactTitle', type: 'string' },  
 { name: 'Address', type: 'string' },  
 { name: 'City', type: 'string' },  
 { name: 'Country', type: 'string' }  
 ],  
 localdata: data // 위에서 셋팅해놓은 data를 localdata에 담아준다.  
 };  
 // jqxgrid 프레임워크에서 만든 dataAdapter object를 생성하여  
 // 위에서 셋팅한 source의 정보를 넣어준다.  
 var dataAdapter = new $.jqx.dataAdapter(source);  

 // HTML 파일에 div의 id로 입력해놓은 jqxgrid에 dataAdapter의 정보를  
 // grid 형태로 출력한다.  
 $("#jqxgrid").jqxGrid(  
 {  
 // 이곳에 들어갈 수 있는 설정값들은 매우 다양하다.  
 // 나중에 조금 더 자세히 알아보기로 하자.  
 width: 850, //높이  
 source: dataAdapter, //위에서 만든 dataAdapter  
 columnsresize: true, //column의 너비를 컨텐츠에 맞게 리사이징  
 columns: [ // 각 컬럼값들의 대한 설정이다.  
 // 일반적으로 text,datafield는 필수적으로 설정하다.  
 // 그밖에 다양한 속성값들이 있으므로 이 또한 다음 시간에 알아보기로 한다.  
 { text: 'Company Name', datafield: 'CompanyName', width: 250 },  
 { text: 'Contact Name', datafield: 'ContactName', width: 150 },  
 { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },  
 { text: 'City', datafield: 'City', width: 120 },  
 { text: 'Country', datafield: 'Country'}  
 ]  
 });  
});  
</script>

 

함수 형태로 만들면 필요할때마다 호출할 수 있고,
다양한 검색조건들에 맞게 데이터를 불러올 수도 있다.
또한 jqxgrid가 자체적으로 가지고 있는 필터 및 검색 조건들도 이용할 수 있다.

기본 구조만 잘 이해하고 있으면 그 후에는 조금씩만 응용되는 형태이니 어렵지 않게 사용할 수 있을 것으로 보인다.

 

 

 

출처 : https://pjmcoding.tistory.com/