grid 내에서 Edit 기능을 이용하여 데이터를 즉시 수정할 수도 있지만, row의 데이터들을 가져와서 재가공이 필요한 경우도 있다. jqxgrid에는 Row의 클릭 / 더블클릭 / 드래그&드롭 등의 기능을 제공하는데, 드래그&드롭의 경우 사용하는 빈도 수가 적고 구현 방식도 까다로우므로 배제하고 나머지 이벤트에 대해서 사용하는 방법을 기록하겠다.
Example
html
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; width:100%">
이름 :<input type="text" name="ipName" readonly/></br>
나이 :<input type="text" name="ipAge" readonly/></br>
주소 :<input type="text" name="ipAddress" readonly/></br>
전화 :<input type="text" name="ipPhone" readonly/></br>
생일 :<input type="text" name="ipBirthday" readonly/></br>
용돈 :<input type="text" name="ipAllowance" readonly/></br>
성별 :<input type="text" name="ipGender" readonly/></br>
<div id="jqxgrid">
</div>
</div>
javascript
$(document).ready(function () {
var data = '[{ "name": "홍길동", "age": "23", "address": "경기","phone": "010-1234-XXXX", "birthday": "1990-02-05","allowance": 5000, "gender":"남"}, { "name": "이몽룡", "age": "18", "address": "서울","phone": "010-9999-XXXX", "birthday": "1995-06-10","allowance": 20000, "gender":"남"}, { "name": "성춘향", "age": "18", "address": "경기","phone": "010-1593-XXXX", "birthday": "1995-08-23","allowance": 12000, "gender":"여"}, { "name": "김흥부", "age": "32", "address": "서울","phone": "010-2854-XXXX", "birthday": "1984-07-11","allowance": 8000, "gender":"남"}, { "name": "박놀부", "age": "35", "address": "경기","phone": "010-4675-XXXX", "birthday": "1982-05-22","allowance": 35000, "gender":"남"}, { "name": "심청이", "age": "21", "address": "서울","phone": "010-8948-XXXX", "birthday": "1991-11-25","allowance": 15000, "gender":"여"}]';
var source = {
datatype: "json",
datafields: [
{name: 'name',type: 'string'},
{name: 'age',type: 'int'},
{name: 'address',type: 'string'},
{name: 'phone',type: 'string'},
{name: 'birthday',type: 'date'},
{name: 'allowance',type: 'number'},
{name: 'gender',type: 'string'}
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: '100%',
height: '300',
source: dataAdapter,
sortable: true,
filterable: true,
showstatusbar: true,
columnsresize: true,
theme: 'energyblue',
columns: [
{text: '이름',datafield: 'name',width: "10%", align:"center"},
{text: '나이',datafield: 'age',width: "10%", align:"center"},
{text: '주소',datafield: 'address',width: "10%", align:"center"},
{text: '전화번호',datafield: 'phone',width: "20%", align:"center"},
{text: '생일',datafield: 'birthday',cellsformat: "yyyy-MM-dd",width: "20%", align:"center"},
{text: '용돈',datafield: 'allowance',cellsformat : 'd',cellsalign: 'right',width: "20%", align:"center"},
{text: '성별',datafield: 'gender',width: "10%", align:"center"}
]
});
$('#jqxgrid').bind('rowselect', function (event) {
var getRowData = $('#jqxgrid').jqxGrid('getrows')[event.args.rowindex];
var name = getRowData['name'];
var age = getRowData['age'];
var address = getRowData['address'];
var phone = getRowData['phone'];
var birthday = getRowData['birthday'];
var allowance = getRowData['allowance'];
var gender = getRowData['gender'];
$("input[name='ipName']").val(name);
$("input[name='ipAge']").val(age);
$("input[name='ipAddress']").val(address);
$("input[name='ipPhone']").val(phone);
$("input[name='ipBirthday']").val(birthday);
$("input[name='ipAllowance']").val(allowance);
$("input[name='ipGender']").val(gender);
});
$('#jqxgrid').on('rowdoubleclick', function (event) {
alert(event.args.rowindex);
});
});
이런 이벤트 기능을 이용하면 다른 URL 페이지로 연결한다던지, 팝업창을 띄우는 기능을 구현할 때 유용하게 사용할 수 있을 것이다.
출처 : https://pjmcoding.tistory.com/
'Frontend > jQuery' 카테고리의 다른 글
[jQuery] jqxgrid Cell Edit / Validation (0) | 2022.10.07 |
---|---|
[jQuery] jqxgrid Grouping (0) | 2022.10.07 |
[jQuery] jqxgrid 집계데이터 (Aggregates 속성) (2) | 2022.10.07 |
[jQuery] jqxgrid 컬럼 속성 및 숨기기 (0) | 2022.10.07 |
[jQuery] jqxgrid 기본구조 (0) | 2022.10.07 |