분류 순서 조절을 좀 더 쉽게 jquery sortable 적용 > 영카트5 팁자료실

영카트5 팁자료실

분류 순서 조절을 좀 더 쉽게 jquery sortable 적용 정보

분류 순서 조절을 좀 더 쉽게 jquery sortable 적용

첨부파일

yc5-categoryorder.zip (2.8K) 85회 다운로드 2020-07-13 16:24:22

본문

영카트5 관리자에서 분류 순서를 ca_order 를 이용해 조정할 수 있습니다.
그러나 숫자를 직접 입력해야 하는 불편함이 있기 때문에 이번에 작업한 고객사에서
좀 더 쉬운 방법이 없겠느냐는 요청에 jquery sortable 를 적용해서 마우스로 순서를
한 화면에서 변경할 수 있도록 해봤습니다.

전체 코드는 첨부한 압축 파일을 다운로드 하셔서 확인하시면 됩니다.
순서는 5차분류까지는 가능하도록 했지만 실제 테스트는 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');
?>
추천
16

댓글 14개

전체 391
영카트5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT