DevExpress dxDataGrid 활용 및 JSON 데이터 처리

 

 

DevExpress dxDataGrid 활용 및 JSON 데이터 처리

데이터 그리드

 

Q: DxDataGrid에서 선택된 행의 데이터를 배열 형태로 받는 방법

DxDataGrid에서 선택된 행의 데이터를 배열 형태로 가져오려면 getSelectedRowsData() 메서드를 사용합니다.

var selectedData = $("#dxDataGrid").dxDataGrid("instance").getSelectedRowsData();
console.log(selectedData); // 배열 형태로 출력

Q: 선택된 행의 데이터를 AJAX로 서버에 보내는 방법

`ajaxSubmit`을 사용하여 데이터를 JSON으로 변환한 후 서버로 전송할 수 있습니다.

$("#myForm").ajaxSubmit({
    type: "POST",
    url: "/server-endpoint",
    data: { selectedRows: JSON.stringify(selectedData) },
    success: function(response) {
        console.log("서버 응답:", response);
    }
});

Q: 서버에서 JSON을 HashMap으로 변환하는 방법

**Jackson 라이브러리**를 사용하면 간단하게 변환할 수 있습니다.

ObjectMapper objectMapper = new ObjectMapper();
HashMap<String, Object> map = objectMapper.readValue(json, HashMap.class);

Q: List 형태의 HashMap 데이터를 열어서 보는 방법

`for` 반복문을 사용하여 데이터를 출력할 수 있습니다.

for (HashMap<String, String> map : list) {
    for (Map.Entry<String, String> entry : map.entrySet()) {
        System.out.println(entry.getKey() + " : " + entry.getValue());
    }
}

Q: DxDataGrid에서 JSON 리스트와 비교하여 같은 값이 있으면 선택되도록 하는 방법

`filter()`와 `selectRows()` 메서드를 활용합니다.

var selectedKeys = dataGrid.getVisibleRows()
    .filter(row => jsonList.some(jsonItem => jsonItem.id === row.data.id && jsonItem.name === row.data.name))
    .map(row => row.key);

dataGrid.selectRows(selectedKeys);

Q: SxDataGrid에서 selection mode가 multiple일 때 checkbox 클릭 시 선택을 제외하는 방법

`onCellClick` 이벤트에서 체크박스 컬럼을 감지하여 동작을 막습니다.

dataGrid.option("onCellClick", function(e) {
    if (e.column.dataField === "selectionColumn") {
        e.event.stopPropagation(); // 이벤트 전파 방지
    }
});