조회된 데이터리스트 분류 단계별 필터링 예시2(GridView)

dataList.setColumnFilter를 활용

 

dataCollection

<w2:dataCollection baseNode="map">
    <w2:dataList baseNode="list" repeatNode="map" id="dlt_codes" saveRemovedData="true">
        <w2:columnInfo>
            <w2:column id="largeCategory" name="대분류" dataType="text"></w2:column>
            <w2:column id="largeCategoryName" name="대분류명" dataType="text"></w2:column>
        </w2:columnInfo>
    </w2:dataList>
    <w2:dataList baseNode="list" repeatNode="map" id="dlt_codes2" saveRemovedData="true">
        <w2:columnInfo>
            <w2:column id="largeCategory" name="대분류" dataType="text"></w2:column>
            <w2:column id="largeCategoryName" name="대분류명" dataType="text"></w2:column>
            <w2:column id="mediumCategory" name="중분류" dataType="text"></w2:column>
            <w2:column id="mediumCategoryName" name="중분류명" dataType="text"></w2:column>
        </w2:columnInfo>
    </w2:dataList>
</w2:dataCollection>

script

grid_codes는 dlt_codes를 참조, grid_codes2는 dlt_codes2를 참조

// 전역 변수 선언
var varCheck = true; // 이벤트 중복실행 방지를 위해 사용하는 변수
// 초기화 부분
grid_codes.bind("onrowindexchange", scwin.fn_grid_codes_onrowindexchange);
..
    scwin.fn_grid_codes_onrowindexchange = function(row, oldRow){
        if(!varCheck || grid_codes.getFocusedRowIndex() < 0){
            return;
        }
        // 수정 중이면 메시지 띄우고 포커스 변경 불가
        if(dlt_codes2.getModifiedIndex().length > 0){
            varCheck = false;
            grid_codes.setFocusedCell(oldRow, 0, false);
            varCheck = true;
            alert("중분류에 수정중인 데이터가 있습니다.");
            return;
        }

        const parentKey = "largeCategory";
        const key = "mediumCategory";
        dlt_codes2.removeColumnFilter(key);
        dlt_codes2.setColumnFilter({type:"func", colIndex:key
            , key:function(cellData, tmpParam, rowIdx){
                // row는 grid_codes의 rowIndex, rowIdx는 dlt_codes2의 rowIndex
                return cellData != "" && dlt_codes.getCellData(row, parentKey)
                	== dlt_codes2.getCellData(rowIdx, parentKey)
                }, condition:"and"});
        dlt_codes2.setRowPosition(0); // onrowpositionchange 호출을 위함, 데이터 없을때도 호출함
        grid_codes2.setFocusedCell(0, 0); // 그리드 포커스, 데이터 없을때는 onrowpositionchange이 호출 안됨
    };
..
// 조회했을때 데이터리스트 설정, data는 조회된 데이터
if(data && data.length > 0){
	let dlt_codes_data = [];
    for(let i=1; i < data.length; i++){
    	// largeCategory는 ORDER BY 된 데이터 !
        if(data[i]["largeCategory"] != data[i-1]["largeCategory"]){
            dlt_codes_data.push(data[i]);
        }
    }
	dlt_code.setJSON(dlt_codes_data);
	dlt_codes2.setJSON(data);
} else {
	dlt_codes.setJSON([]);
	dlt_codes2.setJSON([]);
}

SQL

조회는 LEFT OUTER JOIN, ORDER BY 필수

LEFT OUTER JOIN은 중분류가 없는 대분류 항목들도 다 나오게 하기 위함.

ORDER BY는 for문에서 순차적으로 확인하기 위함.

SELECT CODES.LARGE_CATEGORY
	, CODES.LARGE_CATEGORY_NAME
	, CODES2.MEDIUM_CATEGORY
	, CODES2.MEDIUM_CATEGORY_NAME
FROM CODES
LEFT OUTER JOIN CODES2
ON CODES.LARGE_CATEGORY = CODES2.LARGE_CATEGORY
ORDER BY LARGE_CATEGORY