영카트5 분류 순서 조정 jquery sortable 적용

영카트5의 분류 순서를 조금 더 쉽게 조절해 보고자 jquery sortable 플러그인을 적용했다. 다만 이렇게 할 경우 등록된 분류 개수가 많을 경우 조절이 생각만큼 쉽지 않을 수도 있다. 분류를 한 페이지에 모두 표시하고 순서를 조절하기 때문이다.

대략적인 형태는 위 이미지와 같이 표시가 되며 1차 분류는 1차 분류끼리 순서를 변경할 수 있으며 1차 분류의 2차 분류끼리 또 순서를 변경할 수 있도록 했다. 마찬가지로 3차는 2차 분류의 3차 분류끼리만 순서를 변경하도록 했다.

전체 코드는 아래의 파일을 다운로드하여 확인할 수 있다.

<?php
$sub_menu = '400210';
include_once('./_common.php');
auth_check($auth[$sub_menu], "w");
add_javascript('<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>', 10);
//add_stylesheet('<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">', 10);
$g5['title'] = '분류순서관리';
include_once (G5_ADMIN_PATH.'/admin.head.php');
$sql_where = " where char_length(ca_id) = '2' ";
$sql_common = " from {$g5['g5_shop_category_table']} ";
$sql_order = "order by ca_order asc, ca_id asc";
// 출력할 레코드를 얻음
$sql  = " select ca_id, ca_name {$sql_common} {$sql_where} {$sql_order} ";
$result = sql_query($sql);
$listall = '<a href="'.$_SERVER['SCRIPT_NAME'].'" class="ov_listall">전체목록</a>';
?>
<style>
.categoryorder ol {list-style:none;}
.categoryorder li {background-color: #fff;margin: 5px 0;padding: 5px; border: 1px solid #d6dce7;cursor:move;}
.categoryorder .cdepth-1:nth-child(even){background:#eff3f9}
</style>
<div class="local_ov01 local_ov">
    <?php echo $listall; ?>
</div>
<form name="fcategoryorder" method="post" action="./categoryorderupdate.php" autocomplete="off">
<input type="hidden" name="sst" value="<?php echo $sst; ?>">
<input type="hidden" name="sod" value="<?php echo $sod; ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl; ?>">
<input type="hidden" name="stx" value="<?php echo $stx; ?>">
<input type="hidden" name="page" value="<?php echo $page; ?>">
<div id="sct" class="grid_16 categoryorder">
    <ol class="sortable">
    <?php
    for($i=0; $row=sql_fetch_array($result); $i++) {
        $sql2 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 2) = '{$row['ca_id']}' and char_length(ca_id) = '4' order by ca_order asc, ca_id asc ";
        $result2 = sql_query($sql2);
    ?>
        <li class="cdepth-1" data-ca_id="<?php echo $row['ca_id']; ?>">
            <strong><?php echo get_text($row['ca_name']); ?></strong>
            <?php if (sql_num_rows($result2) > 0) { ?>
            <ol class="depth sortable2">
                <?php
                for($j=0; $row2=sql_fetch_array($result2); $j++) {
                    $sql3 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 4) = '{$row2['ca_id']}' and char_length(ca_id) = '6' order by ca_order asc, ca_id asc ";
                    $result3 = sql_query($sql3);
                ?>
                <li class="cdepth-2" data-ca_id="<?php echo $row2['ca_id']; ?>">
                    <?php echo get_text($row2['ca_name']); ?>
                    <?php if (sql_num_rows($result3) > 0) { ?>
                    <ol class="depth sortable3">
                        <?php
                        for($k=0; $row3=sql_fetch_array($result3); $k++) {
                            $sql4 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 6) = '{$row3['ca_id']}' and char_length(ca_id) = '8' order by ca_order asc, ca_id asc ";
                            $result4 = sql_query($sql4);
                        ?>
                        <li class="cdepth-3" data-ca_id="<?php echo $row3['ca_id']; ?>">
                            <?php echo get_text($row3['ca_name']); ?>
                            <?php if (sql_num_rows($result4) > 0) { ?>
                                <ol class="depth sortable4">
                                <?php
                                for($l=0; $row4=sql_fetch_array($result4); $l++) {
                                    $sql5 = " select ca_id, ca_name {$sql_common} where substring(ca_id, 1, 8) = '{$row4['ca_id']}' and char_length(ca_id) = '10' order by ca_order asc, ca_id asc ";
                                    $result5 = sql_query($sql5);
                                ?>
                                <li class="cdepth-4" data-ca_id="<?php echo $row4['ca_id']; ?>">
                                    <?php echo get_text($row4['ca_name']); ?>
                                    <?php if (sql_num_rows($result4) > 0) { ?>
                                        <ol class="depth sortable5">
                                        <?php
                                        for($n=0; $row5=sql_fetch_array($result5); $n++) {
                                        ?>
                                        <li class="cdepth-5" data-ca_id="<?php echo $row5['ca_id']; ?>">
                                            <?php echo get_text($row5['ca_name']); ?>
                                        </li>
                                        <?php } ?>
                                    </ol>
                                    <?php } ?>
                                </li>
                                <?php } ?>
                            </ol>
                            <?php } ?>
                        </li>
                        <?php } ?>
                    </ol>
                    <?php } ?>
                </li>
                <?php } ?>
            </ol>
            <?php } ?>
        </li>
    <?php
    }
    ?>
    </ol>
</div>
<div class="btn_fixed_top">
    <input type="submit" value="수정" class="btn_02 btn">
</div>
</form>
<script>
$(function() {
    $( ".sortable, .sortable2, .sortable3, .sortable4, .sortable5" ).sortable();
    $( ".sortable, .sortable2, .sortable3, .sortable4, .sortable5" ).disableSelection();
    $("form[name='fcategoryorder']").on("submit", function(e) {
        e.preventDefault();
        e.stopPropagation();
        if(!confirm("분류순서를 수정하시겠습니까?"))
            return false;
        var ca_id;
        var ca_id2;
        var ca_id3;
        var ca_id4;
        var ca_id5;
        var order;
        var order2;
        var order3;
        var order4;
        var order5;
        var data = new Object();
        $(".cdepth-1").each(function(i) {
            ca_id = $(this).data("ca_id");
            order = i + 1;
            data[ca_id] = order;
            $(this).find(".cdepth-2").each(function(j) {
                ca_id2 = $(this).data("ca_id");
                order2 = order + "" + (j + 1);
                data[ca_id2] = order2;
                $(this).find(".cdepth-3").each(function(k) {
                    ca_id3 = $(this).data("ca_id");
                    order3 = order2 + "" + (k + 1);
                    data[ca_id3] = order3;
                    $(this).find(".cdepth-4").each(function(l) {
                        ca_id4 = $(this).data("ca_id");
                        order4 = order3 + "" + (l + 1);
                        data[ca_id4] = order4;
                        $(this).find(".cdepth-5").each(function(m) {
                            ca_id5 = $(this).data("ca_id");
                            order5 = order4 + "" + (m + 1);
                            data[ca_id5] = order5;
                        });
                    });
                });
            });
        });
        $.ajax({
            url: "./categoryorderupdate.php",
            type: "post",
            data: {token: $("input[name='token']").val(), data: JSON.stringify(data)},
            success : function( data ){
                if (data != "ok") {
                    alert(data);
                    return false;
                }
                document.location.reload();
            },
            error : function( jqxhr , status , error ){
                console.log( jqxhr , status , error );
            }
        });
    });
});
</script>
<?php
include_once (G5_ADMIN_PATH.'/admin.tail.php');
?>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.