트리 형식 카테고리 리스트 v2

<?php
include_once(“./_common.php”);

$sql_common = ” from $g4[shop_category_table] “;
?>

<ul>
    <li class=”cat_list0″>
        <div class=”wrap”>
            <div class=”mark minus” id=”C00″></div>
            <div class=”name” id=”CID_C”>전체분류</div>
        </div>
    </li>
    <li id=”C00_categoryList”>
        <ul>
        <?php // 1차 분류
        $sql_where = ” where char_length(ca_code) = 3 order by ca_code asc “;
        $sql = ” select ca_name, ca_code
                    $sql_common
                    $sql_where “;
        $result = sql_query($sql);

        for($i = 0; $row = sql_fetch_array($result); $i++ ) {
        ?>
            <li class=”cat_list1″>
                <div class=”wrap”>
                    <div class=”mark plus” id=”<?=$row[ca_code]?>”></div>
                    <div class=”name” id=”CID_<?=$row[ca_code]?>”><?=get_text($row[ca_name])?></div>
                </div>
            </li>
            <li id=”<?=$row[ca_code]?>_categoryList” class=”nodisplay”>
                <ul>
                <?php
                $sql_where2 = ” where char_length(ca_code) = 5 and substr(ca_code, 1, 3) = ‘$row[ca_code]’ order by ca_code asc “;
                $sql2 = ” select ca_name, ca_code
                            $sql_common
                            $sql_where2 “;
                $result2 = sql_query($sql2);

                for($j = 0; $row2 = sql_fetch_array($result2); $j++ ) {
                ?>
                    <li class=”cat_list2″>
                        <div class=”wrap”>
                            <div class=”mark plus” id=”<?=$row2[ca_code]?>”></div>
                            <div class=”name” id=”CID_<?=$row2[ca_code]?>”><?=get_text($row2[ca_name])?></div>
                        </div>
                    </li>
                    <li id=”<?=$row2[ca_code]?>_categoryList” class=”nodisplay”>
                        <ul>
                        <?php
                        $sql_where3 = ” where char_length(ca_code) = 7 and substr(ca_code, 1, 5) = ‘$row2[ca_code]’ order by ca_code asc “;
                        $sql3 = ” select ca_name, ca_code
                                    $sql_common
                                    $sql_where3 “;
                        $result3 = sql_query($sql3);

                        for($j = 0; $row3 = sql_fetch_array($result3); $j++ ) {
                        ?>
                            <li class=”cat_list3″>
                                <div class=”wrap”>
                                    <div class=”mark plus” id=”<?=$row3[ca_code]?>”></div>
                                    <div class=”name” id=”CID_<?=$row3[ca_code]?>”><?=get_text($row3[ca_name])?></div>
                                </div>
                            </li>
                        <?php
                        }
                        ?>
                        </ul>
                    </li>
                <?php
                }
                ?>
                </ul>
            </li>
        <?php
        }
        ?>
        </ul>
    </li>
</ul>

<script type=”text/javascript”>
var c_id;
var n_id;
$(function() {
    $(‘.mark’).click(function() {
        c_id = $(this).attr(“id”);

        if($(this).hasClass(“minus”)) {
            $(this).removeClass(“minus”);
            $(this).addClass(“plus”);
            $(‘#’ + c_id + ‘_categoryList’).hide();
        } else {
            $(this).removeClass(“plus”);
            $(this).addClass(“minus”);
            $(‘#’ + c_id + ‘_categoryList’).show();
        }
    });

    $(‘.name’).click(function() {
        n_id = $(this).attr(“id”).replace(“CID_”, “”);
        $(‘.name’).removeClass(“clicked”);
        $(this).addClass(“clicked”);

        loadCategoryForm(n_id);
    });
});
</script>

#categoryList { float: left; width: 215px; height: 383px; margin-top: 60px; padding: 15px 0 0 20px; border: 1px solid #ccc; overflow: auto; }
#categoryList ul {  margin: 0; padding: 0; list-style: none; }
#categoryList li { display: inline-block; }
#categoryList .cat_list0 { width: 196px; height: 18px; padding-top: 6px; background: url(‘../images/item_category_folder.gif’) no-repeat 14px 5px; }
#categoryList .cat_list1 { width: 180px; height: 18px; padding-top: 6px; padding-left: 16px; background: url(‘../images/item_category_folder.gif’) no-repeat 30px 5px; }
#categoryList .cat_list2 { width: 164px; height: 18px; padding-top: 6px; padding-left: 32px; background: url(‘../images/item_category_folder.gif’) no-repeat 46px 5px; }
#categoryList .cat_list3 { width: 148px; height: 18px; padding-top: 6px; padding-left: 48px; background: url(‘../images/item_category_folder.gif’) no-repeat 62px 5px; }
#categoryList .wrap { float: left; }
#categoryList .wrap .mark { float: left; width: 35px; height: 9px; cursor: pointer; }
#categoryList .wrap .minus { background: url(‘../images/item_category_minus.gif’) no-repeat left top; }
#categoryList .wrap .plus { background: url(‘../images/item_category_plus.gif’) no-repeat left top; }
#categoryList .name { float: left; top: 0; color: #333; font-weight: bold; cursor: pointer; }
#categoryList .clicked { background: #ccc; }
#categoryList .nodisplay { display: none; }