홈

Jqxgrid Cellrender jqxgrid를 더욱 적극적으로 활용을 하다보면 cell 단위의 작업이 필요한 경우가 있습니다. cell 내부의 태그를 직접 컨트롤 하고 싶어지는 경우도 있고 조건에 따라 스타일링(CSS)을 적용하고 싶을 수도 있습니다. 그 방법을 지금부터 알아보도록 하겠습니다. Example $(document).ready(function () { // 실습을 위해 데이터 하나의 주소 정보를 삭제하였습니다. var data = '[{ "name": "홍길동", "age": "23", "address": "","phone": "010-1234-XXXX", "birthday": "...

Jqxgrid Row Add/Del 특정 컬럼을 커스텀하여 Button형태로 만들고 해당 버튼에 click event를 적용하여 Row를 추가하거나 삭제하는 기능을 구현해보도록 하겠습니다. 이전 시간에 했던 edit 활성화와 validation은 그대로 두었습니다. Example $(document).ready(function () { // 각 row data에 add_btn,del_btn의 값을 동일하게 +,-로 지정했습니다. //해당 값이 없을 경우 버튼 안에 text가 false로 표시됩니다. var data = '[{ "name": "홍길동", "age": "23", "address":...

Jqxgrid Cell Edit/Validation 이전까지는 단순히 불러온 데이터를 가지고 데이터를 처리하는 방법을 해봤다면 지금부터는 불러온 데이터를 다양한 방법을 수정하는 법을 알아보려고 합니다. 데이터를 수정할때 유효성 체크는 매우 중요합니다. 다행히 jqxgrid 또한 cell을 수정할때 유효성을 체크하고 입력값의 범위 등을 조절할 수 있습니다. Example $(document).ready(function () { var data = '[{ "name": "홍길동", "age": "23", "address": "경기","phone": "010-1234-XXXX", "birthday": "199...

Jqxgrid Event grid내의 Edit 기능을 이용하여 데이터를 즉시 수정할 수도 있지만 row의 데이터들을 가져와서 재가공(수정/삭제)이 필요한 경우도 있을 겁니다. 사용자의 실수 방지와 직관성을 높이기 위해서는 이런 디자인 방식이 더 유용한 경우가 있을겁니다. 그래서 Row의 클릭/더블클릭/드래그&드롭 등의 기능을 이용할 수 있는데요. Drag&Drop의 경우 사용하는 빈도 수가 낮고 구현 방식도 조금 까다로워 일단 배제하도록 하겠습니다. Example $(document).ready(function () { var data = '[{ "name": "홍길동", "age": "2...

Jqxgrid Grouping 조회된 데이터들을 특정한 조건에 맞게 그룹화하여 보고 싶을때가 있습니다. 데이터를 분석하는데 필수적인 기능 중 하나죠. 엑셀에서는 이런 강력한 기능들이 잘 구현이 되어있습니다. jqxgrid도 못지 않게 훌륭한 기능을 가지고 있습니다. 그럼 굳이 엑셀이 필요하지 않을 수도 있지 않을까요? 적어도 조회(SELECT)를 하는 기능에서만큼요. Example $(document).ready(function () { // grouping 구현을 더 잘 보여드리기 위해 주소 정보를 간소화 시키고, 성별 컬럼을 추가하였습니다. var data = '\[{ "name": "홍길동", "...

Jqxgrid Column 숨기기/보이기(hide/show) 만약 grid에서 보여줘야 하는 Columns이 너무 많을 경우, 어떻게 해야될까요? 혹은 업무에 따라 직급에 따라 필요한 Column 정보들이 다른 경우엔 어떻게 해야될까요? jqxgrid 에서는 원하는 컬럼만 보여주고 숨길 수 있는 기능들을 가지고 있습니다. 조금만 응용한다면 사용자 권한에 따라서 보여지는 데이터도 달리 할 수 있을 겁니다. Example $(document).ready(function () { var data = '[{ "name": "홍길동", "age": "23", "address": "서울 강남구","phone": "0...

Jqxgrid Aggregates jqxgrid는 단순 합계,평균은 status bar에서 간단하게 표시할 수 있고 여러 조건들을 적용하여 custom도 가능하기 때문에 다양하게 활용할 수 있습니다. columns에 aggregates 속성을 추가하여 함수형태로 구현하여 return 값을 지정해주면 됩니다. Example $(document).ready(function () { var data = '\[{ "name": "홍길동", "age": 23, "address": "서울 강남구", "phone": "010-1234-XXXX", "birthday": "1990-02-05"...

Jqxgrid Attributes jqxgrid에는 각 컬럼들에 여러가지 속성값들을 지정해 줄 수 있습니다. 또한 grid 전체에 일괄 적용할 수 있는 속성값들도 존재합니다. 전체적으로 json 형태의 구조를 띄고 있지만 CSS의 속성명 : 속성값 처럼 생각하시면 더 편하게 접근하실 수 있습니다. Example $(document).ready(function () { //보시기 편하도록 데이터 셋을 한글로 변환하였습니다. var data = '[{ "name": "홍길동", "age": 23, "address": "서울 강남구", "phone": "010-1234-XXXX", ...