본문 바로가기
웹 개발 이야기/php

[PHP+JQUERY] 2단계 카테고리 메뉴

by Gommin 2023. 3. 16.

// 아래의 예제는 그누보드를 기반으로 하여 관심 제품 관리 컨셉으로 제작되었다.

​CSS
// 그누보드의 기본 CSS에 포함된 스타일 구문은 작성하지 않았다.

.bold { font-weight: bold; }
.d-table { display: table; }
.table-cell { display: table-cell; vertical-align: middle; }
.d-flex {display: flex;}
.wd-100 { width: 100%; }

.wrap-interestprod-adm { width: 100%; }
.wrap-interestprod-adm .div-head, .wrap-interestprod-adm .div-body { width: 100%; }
.wrap-interestprod-adm .div-body .div-parent, .wrap-interestprod-adm .div-body .div-child {
    width: 100%;
    display: flex;
}
.wrap-interestprod-adm .div-body .wrap-div-child { width: 100%; }
.wrap-interestprod-adm .div-body input[type=number] {
    text-align: center;
}
.wrap-interestprod-adm .div-body input[type=text] {
    padding: 0px 10px;
}
.wrap-interestprod-adm .div-head .td1, .wrap-interestprod-adm .div-head .td2, .wrap-interestprod-adm .div-head .td3, .wrap-interestprod-adm .div-head .td4, .wrap-interestprod-adm .div-body .td1, .wrap-interestprod-adm .div-body .td2, .wrap-interestprod-adm .div-body .td3, .wrap-interestprod-adm .div-body .td4 {
    text-align: center;
    border: 1px solid #ccc;
    padding: 10px 0px;
}
.wrap-interestprod-adm .div-head .td1, .wrap-interestprod-adm .div-body .td1 {
    width: calc( 100% - (140px * 3) );
}
.wrap-interestprod-adm .div-head .td2, .wrap-interestprod-adm .div-head .td3, .wrap-interestprod-adm .div-head .td4, .wrap-interestprod-adm .div-body .td2, .wrap-interestprod-adm .div-body .td3, .wrap-interestprod-adm .div-body .td4 {
    width: 140px;
}

.wrap-interestprod-adm .div-body .td1, .wrap-interestprod-adm .div-body .td2, .wrap-interestprod-adm .div-body .td3, .wrap-interestprod-adm .div-body .td4 {
    padding: 10px 10px;
}
.wrap-interestprod-adm .div-body .td1 .d-table { width: 100%; }
.wrap-interestprod-adm .div-body .td1 .d-table .table-cell { width: 100%; }
.wrap-interestprod-adm .div-body .td1 .d-table .table-cell.div-cname2 {  }
.wrap-interestprod-adm .div-body .td1 .d-table .div-cname1 .input_cname1 {
    width: 86%;
}
.wrap-interestprod-adm .div-body .td1 .d-table .div-cname2 .input_cname1 {
    width: 86%;
    margin-left: 10px;
}
.wrap-interestprod-adm .div-body .btn_del_cate1, .wrap-interestprod-adm .div-body .btn_del_cate2 {
    width: 100%;
    padding: 8px 0px;
    border: 0px;
    border-radius: 10px;
    cursor: pointer;
    background-color: rgb(197,70,55);
    color: #fff;
}
.wrap-interestprod-adm .div-body .btn_add_cate2 {
    width: 100%;
    padding: 8px 0px;
    border: 0px;
    border-radius: 10px;
    cursor: pointer;
    background-color: rgb(52,24,90);
    color: #fff;
}

.temp-l {
    font-weight: 700;
    font-size: 22px;
    color: #aaa;
    margin-left: 10px;
}

 

interest_prod.php
// 폼 화면

<?php
$tb_name = "g5_interest_prod";
$sql1 = "select * from {$tb_name} where parent_idx = 0 order by corder asc, idx asc ";
$result1 = sql_query($sql1);
$cnt_data = sql_num_rows($result1);
?>

<form name="fboardform" id="fboardform" action="./interest_prod_update.php" method="post" enctype="multipart/form-data">

    <section id="anc_bo_basic">
        <div class="tbl_frm01 tbl_wrap">
            <div class="wrap-interestprod-adm">
                <div class="div-head">
                    <div class="d-flex wd-100">
                        <div class="td1 bold">카테고리</div>
                        <div class="td2 bold">삭제</div>
                        <div class="td3 bold">삭제</div>
                        <div class="td4 bold">추가</div>
                    </div>
                </div>

                <?
                if($cnt_data<1){
                    // 저장된 대분류 데이터가 없을 때
                    ?>
                    <div class="div-body">
                        <div class="div-parent">
                            <div class="td1">
                                <div class="d-table">
                                    <div class="table-cell div-cname1">
                                        <input type="text" class="input_cname1 frm_input frm_input_full" name="cname[0]">
                                    </div>
                                </div>
                            </div>
                            <div class="td2"><input type="number" class="frm_input frm_input_full" name="odnum[0]"></div>
                            <div class="td3"><input type="button" class="btn_del_cate1" data-cnt="0" value="삭제"></div>
                            <div class="td4"><input type="button" class="btn_add_cate2" data-cnt="0" value="추가"></div>
                        </div>
                        <div class="wrap-div-child"></div>
                    </div>
                    <?
                }else{
                    // 저장된 대분류 데이터가 있을 때
                    for($a=0; $row1=sql_fetch_array($result1); $a++){
                        ?>
                        <div class="div-body">
                            <div class="div-parent">
                                <div class="td1">
                                    <div class="d-table">
                                        <div class="table-cell div-cname1">
                                            <input type="text" class="input_cname1 frm_input frm_input_full" name="cname[<?= $a ?>]" value="<?= $row1['cname'] ?>">
                                        </div>
                                    </div>
                                </div>
                                <div class="td2"><input type="number" class="frm_input frm_input_full" name="odnum[<?= $a ?>]" value="<?= $row1['corder'] ?>"></div>
                                <div class="td3"><input type="button" class="btn_del_cate1" data-cnt="<?= $a ?>" value="삭제"></div>
                                <div class="td4"><input type="button" class="btn_add_cate2" data-cnt="<?= $a ?>" value="추가"></div>
                            </div>
                            <div class="wrap-div-child">
                                <?
                                $parent_idx = $row1['idx'];
                                $sql2 = "select * from {$tb_name} where parent_idx = '{$parent_idx}' order by corder asc, idx asc ";
                                $result2 = sql_query($sql2);
                                $cnt_data2 = sql_num_rows($result2);
                                if($cnt_data2>0){
                                    // 하위 분류가 있으면
                                    for($b=0; $row2=sql_fetch_array($result2); $b++){
                                        ?>
                                        <div class="div-child">
                                            <div class="td1">
                                                <div class="d-table">
                                                    <div class="table-cell div-cname2">
                                                        <span class="temp-l">┗</span> <input type="text" class="input_cname1 frm_input frm_input_full" name="cname<?= $a ?>[]" value="<?= $row2['cname'] ?>">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="td2"><input type="number" class="frm_input frm_input_full" name="odnum<?= $a ?>[]" value="<?= $row2['corder'] ?>"></div>
                                            <div class="td3"><input type="button" class="btn_del_cate2" value="삭제"></div>
                                            <div class="td4"></div>
                                        </div>
                                        <?
                                    }
                                }
                                ?>
                            </div>
                        </div>
                        <?
                    }
                }
                ?>

            </div>
        </div>
    </section>
    <div class="btn_fixed_top">
         <input type="button" value="대분류 추가" class="btn_add_cate1 btn btn_03">
         <input type="submit" value="확인" class="btn_submit btn btn_01">
     </div>

</form>

<script>
    $(".btn_add_cate1").on("click", function (){
        const cnt_data = parseInt('<?= $cnt_data ?>');
        const next_num = cnt_data+1;
        let addtxt = '<div class="div-body">';
        addtxt += '<div class="div-parent">';
        addtxt += '<div class="td1">';
        addtxt += '<div class="d-table">';
        addtxt += '<div class="table-cell div-cname1">';
        addtxt += '<input type="text" class="input_cname1 frm_input frm_input_full" name="cname['+next_num+']">';
        addtxt += '</div>';
        addtxt += '</div>';
        addtxt += '</div>';
        addtxt += '<div class="td2"><input type="number" class="frm_input frm_input_full" name="odnum['+next_num+']"></div>';
        addtxt += '<div class="td3"><input type="button" class="btn_del_cate1" value="삭제"></div>';
        addtxt += '<div class="td4"><input type="button" class="btn_add_cate2" data-cnt="'+next_num+'" value="추가"></div>';
        addtxt += '</div>';
        addtxt += '<div class="wrap-div-child">';
        addtxt += '</div>';
        addtxt += '</div>';
        $(".wrap-interestprod-adm").append(addtxt);
    })

    $(document).on("click", ".btn_add_cate2", function (){
        const data_cnt = $(this).attr("data-cnt");
        const temp = $(this).closest(".div-body").children(".wrap-div-child");
        let addtxt = '<div class="div-child">';
        addtxt += '<div class="td1">';
        addtxt += '<div class="d-table">';
        addtxt += '<div class="table-cell div-cname2">';
        addtxt += '<span class="temp-l">┗</span> <input type="text" class="input_cname1 frm_input frm_input_full" name="cname'+data_cnt+'[]">';
        addtxt += '</div>';
        addtxt += '</div>';
        addtxt += '</div>';
        addtxt += '<div class="td2"><input type="number" class="frm_input frm_input_full" name="odnum'+data_cnt+'[]"></div>';
        addtxt += '<div class="td3"><input type="button" class="btn_del_cate2" value="삭제"></div>';
        addtxt += '<div class="td4"></div>';
        addtxt += '</div>';
        temp.append(addtxt);
    })

    $(document).on("click", ".btn_del_cate1", function (){
        $(this).closest(".div-body").remove();
    })

    $(document).on("click", ".btn_del_cate2", function (){
        $(this).closest(".div-child").remove();
    })
</script>

 

interest_prod_update.php
// 데이터 처리 페이지

$tb_name = "g5_interest_prod";

// 전체 데이터 삭제
$sql = "delete from {$tb_name} ";
sql_query($sql);

if(count($_POST['cname'])>0){
    for($a=0; $a<count($_POST['cname']); $a++){
        $cname = $_POST['cname'][$a];
        $odnum = $_POST['odnum'][$a];
        if(!$odnum){ $odnum = 0; }
        $sql = "insert into {$tb_name} set parent_idx = '0', cname = '{$cname}', corder = '{$odnum}' ";
        sql_query($sql);
        $idx = sql_insert_id();
        if(count($_POST['cname'.$a])>0){
            for($b=0; $b<count($_POST['cname'.$a]); $b++){
                $cname2 = $_POST['cname'.$a][$b];
                $odnum2 = $_POST['odnum'.$a][$b];
                if(!$odnum2){ $odnum2 = 0; }
                $sql2 = "insert into {$tb_name} set parent_idx = '{$idx}', cname = '{$cname2}', corder = '{$odnum2}' ";
                sql_query($sql2);
            }
        }
    }
}
goto_url("./interest_prod.php");

 

저작자표시 비영리 변경금지

'웹 개발 이야기 > php' 카테고리의 다른 글

[PHP] 파일 저장(확장자 체크, thumnail, 기존 파일 삭제)  (0) 2023.05.25
[PHP] AWS S3 Bucket의 파일 삭제  (0) 2023.03.16
[PHP] pagination  (0) 2023.03.16
[PHP] Excel data upload  (0) 2023.03.16
[PHP] 현재 보고있는 화면 캡쳐 후, 다운로드 / 인쇄  (0) 2023.03.16

관련글

댓글

티스토리툴바