반응형
상품 정보 수정에서 상품 카테고리
상품 카테고리는 '상품 조회' 페이지에서 처럼 DB에 저장된 카테고리가 출력이 되면서, '상품 등록' 페이지와 같이 대분류 선택에 따라 중분류가 초기화 및 변경되도록 해야 합니다.
따라서 '상품 조회', '상품 등록' 페이지에서의 사용한 상품 카테고리 관련 코드를 활용하여 작성했습니다.
먼저 DB에 저장된 카테고리가 선택된 상태로 출력시킬 코드를 추가해줍니다. 아래의 코드는 $(document). ready(function(){}) 메서드 내부에 반드시 작성해 주어야 합니다.
/* 카테고리 */
let cateList = JSON.parse('${cateList}');
let cate1Array = new Array();
let cate2Array = new Array();
let cate1Obj = new Object();
let cate2Obj = new Object();
let cateSelect1 = $(".cate1");
let cateSelect2 = $(".cate2");
/* 카테고리 배열 초기화 메서드 */
function makeCateArray(obj,array,cateList, tier){
for(let i = 0; i < cateList.length; i++){
if(cateList[i].tier === tier){
obj = new Object();
obj.kind_name = cateList[i].kind_name;
obj.kind_id = cateList[i].kind_id;
obj.cateparent = cateList[i].cateparent;
array.push(obj);
}
}
}
/* 배열 초기화 */
makeCateArray(cate1Obj,cate1Array,cateList,1);
makeCateArray(cate2Obj,cate2Array,cateList,2);
let targetCate1 = '';
let targetCate2 = '${productsInfo.kind_id}';
for(let i = 0; i < cate2Array.length; i++){
if(targetCate2 === cate2Array[i].kind_id){
targetCate2 = cate2Array[i];
}
}// for
for(let i = 0; i < cate2Array.length; i++){
if(targetCate2.cateparent === cate2Array[i].cateparent){
cateSelect2.append("<option value='"+cate2Array[i].kind_id+"'>" + cate2Array[i].kind_name + "</option>");
}
}
$(".cate2 option").each(function(i,obj){
if(targetCate2.kind_id=== obj.value){
$(obj).attr("selected", "selected");
}
});
for(let i = 0; i < cate1Array.length; i++){
if(targetCate2.cateparent === cate1Array[i].kind_id){
targetCate1 = cate1Array[i];
}
}// for
for(let i = 0; i < cate1Array.length; i++){
cateSelect1.append("<option value='"+cate1Array[i].kind_id+"'>" + cate1Array[i].kind_name + "</option>");
}
$(".cate1 option").each(function(i,obj){
if(targetCate1.cateparent === obj.value){
$(obj).attr("selected", "selected");
}
});
카테고리가 정상적으로 출력되는지 확인합니다.
반응형
'😎 STS3 Spring 쇼핑몰' 카테고리의 다른 글
STS3 쇼핑몰 프로젝트[23] 상품 정보 삭제 구현 (0) | 2022.08.04 |
---|---|
STS3 쇼핑몰 프로젝트[22] 상품 정보 수정 구현(3) (0) | 2022.08.04 |
STS3 쇼핑몰 프로젝트[22] 상품 정보 수정 구현(1) (0) | 2022.08.04 |
STS3 쇼핑몰 프로젝트[21] 상품 조회 기능 구현(2) (0) | 2022.08.04 |
STS3 쇼핑몰 프로젝트[21] 상품 조회 기능 구현(1) (0) | 2022.08.04 |