FrameWork/jQuery
Easy Widgets를 이용한 정렬 순서 수정
백룡화검
2012. 2. 9. 21:25
어제 jQuery Plugin Easy Widgets 포스트에서 구상했던 페이지를 간단하게 구현해봤다.
작업은 생각한 것보다 어렵지 않았고 jQuery를 이용했기 때문에 쉽게 구현이 될 수 있었던 것 같다.
이 기능은 쇼핑몰에서 상품 리스트 정렬 순서를 변경할 때 사용하려고 한다. 상품 리스트에서 상품 순서를 변경 후
완료 버튼을 누르면 모든 상품에 대해서 정렬 순서를 변경하는 것이 핵심이다. 단 상품이 아주 많다면.. 생각을.. ㅋ
이런 식으로 위젯을 마우스로 드래그하면 위치를 바꿀 수 있는데 각 위젯은 고유한 index를 가지게 된다.
이 index를 정렬 순서로 변경하는 것이 핵심이라면 핵심이다. 아래는 실제 테스트한 소스 코드들이다.
쇼핑몰이 영카트4 기반으로 제작되기 때문에 기본 코드들은 그냥 사용했다.
widgets.php
widgets_update.php
widgets.css
단순히 기능 테스트용으로 작성했기 때문에 실제 페이지에서는 디자인적 요소를 많이 첨가해야할 것 같다.
하지만 상품의 정렬을 이런 식으로 하게 되면 클라이언트에게 좀 더 어필할 수 있는 부분이 아닐까 싶다는.. ㅋ
<<추가>>
어제 포스트 올리고 테스트를 하던 도중 IE9에서는 제대로 작동하지 않는 문제가 있었다. jQuery UI 플러그인의
버전이 낮아서 생긴 문제로 최신 버전으로 교체하여 주면 정상 작동하는 것을 확인하였다.
<<수정 2011.10.27. 14:33>>
widgets.php 파일의 스크립트 부분을 조금 수정해서 배열로 데이터를 넘기도록 했다. 이게 좀 더 나을 것 같아서..
배열로 넘오오는 데이터를 처리하기 위해 widgets_update.php 파일 역시 수정.
작업은 생각한 것보다 어렵지 않았고 jQuery를 이용했기 때문에 쉽게 구현이 될 수 있었던 것 같다.
이 기능은 쇼핑몰에서 상품 리스트 정렬 순서를 변경할 때 사용하려고 한다. 상품 리스트에서 상품 순서를 변경 후
완료 버튼을 누르면 모든 상품에 대해서 정렬 순서를 변경하는 것이 핵심이다. 단 상품이 아주 많다면.. 생각을.. ㅋ
이런 식으로 위젯을 마우스로 드래그하면 위치를 바꿀 수 있는데 각 위젯은 고유한 index를 가지게 된다.
이 index를 정렬 순서로 변경하는 것이 핵심이라면 핵심이다. 아래는 실제 테스트한 소스 코드들이다.
쇼핑몰이 영카트4 기반으로 제작되기 때문에 기본 코드들은 그냥 사용했다.
widgets.php
<?php
include_once("./_common.php");
include_once("$g4[path]/head.sub.php");
$sql = " select no from widget order by ord asc ";
$result = sql_query($sql);
?>
<link rel="stylesheet" href="<?=$g4['path']?>/widgets.css" type="text/css">
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.easywidgets.min.js"></script>
<script type="text/javascript">
$(function(){
$.fn.EasyWidgets({
behaviour : {
dragDelay : 100,
dragRevert : 100,
dragOpacity : 0.8,
useCookies : false
}
});
$('#Btn').click(function() {
var wcnt = $('.widget').size();
for(i=0; i<wcnt; i++) {
var idx = $('.widget').index($('.widget:eq(' + i + ')'));
var no = $('.widget:eq(' + i + ')').attr("id").replace("no", "");
$.post(
'widgets_update.php',
{ no: no, order: idx }
);
}
});
});
</script>
<div id="wrap">
<div class="widget-place">
<?php
for($i = 0; $row = sql_fetch_array($result); $i++) {
?>
<div class="widget movable" id="no<?=$row[no]?>">
<div class="widget-header">위젯<?=$row[no]?></div>
<div class="widget-content">위젯 내용</div>
</div>
<?php
}
?>
</div>
<div id="Button"><button id="Btn">완료</button></div>
</div>
<?php
inlcude_once("$g4[path]/tail.sub.php");
?>
include_once("./_common.php");
include_once("$g4[path]/head.sub.php");
$sql = " select no from widget order by ord asc ";
$result = sql_query($sql);
?>
<link rel="stylesheet" href="<?=$g4['path']?>/widgets.css" type="text/css">
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.easywidgets.min.js"></script>
<script type="text/javascript">
$(function(){
$.fn.EasyWidgets({
behaviour : {
dragDelay : 100,
dragRevert : 100,
dragOpacity : 0.8,
useCookies : false
}
});
$('#Btn').click(function() {
var wcnt = $('.widget').size();
for(i=0; i<wcnt; i++) {
var idx = $('.widget').index($('.widget:eq(' + i + ')'));
var no = $('.widget:eq(' + i + ')').attr("id").replace("no", "");
$.post(
'widgets_update.php',
{ no: no, order: idx }
);
}
});
});
</script>
<div id="wrap">
<div class="widget-place">
<?php
for($i = 0; $row = sql_fetch_array($result); $i++) {
?>
<div class="widget movable" id="no<?=$row[no]?>">
<div class="widget-header">위젯<?=$row[no]?></div>
<div class="widget-content">위젯 내용</div>
</div>
<?php
}
?>
</div>
<div id="Button"><button id="Btn">완료</button></div>
</div>
<?php
inlcude_once("$g4[path]/tail.sub.php");
?>
widgets_update.php
<?php
include_once("./_common.php");
if(!$no) {
exit;
}
$sql = " update widget set ord = '$order' where no = '$no' ";
sql_query($sql);
?>
include_once("./_common.php");
if(!$no) {
exit;
}
$sql = " update widget set ord = '$order' where no = '$no' ";
sql_query($sql);
?>
widgets.css
@charset "utf-8";
#wrap { width: 800px; padding-top: 30px; }
.widget-place { width: 800px; height: auto; float: left; list-style: none; }
.widget-placeholder { width: 148px; height: 98px; float: left; margin: 0 0 30px 40px; border: 1px dashed #ccc; background: #eee; }
.widget { width: 148px; height: 98px; float: left; margin: 0 0 30px 40px; border: 1px solid #ddd; }
.widget-header { height: 20px; font-weight: bold; color: #666; background: #ccc; }
.widget-content { width: 148px; height: 78px; }
#Button { clear: both; width: 800px; padding-top: 20px; text-align: right; }
#wrap { width: 800px; padding-top: 30px; }
.widget-place { width: 800px; height: auto; float: left; list-style: none; }
.widget-placeholder { width: 148px; height: 98px; float: left; margin: 0 0 30px 40px; border: 1px dashed #ccc; background: #eee; }
.widget { width: 148px; height: 98px; float: left; margin: 0 0 30px 40px; border: 1px solid #ddd; }
.widget-header { height: 20px; font-weight: bold; color: #666; background: #ccc; }
.widget-content { width: 148px; height: 78px; }
#Button { clear: both; width: 800px; padding-top: 20px; text-align: right; }
단순히 기능 테스트용으로 작성했기 때문에 실제 페이지에서는 디자인적 요소를 많이 첨가해야할 것 같다.
하지만 상품의 정렬을 이런 식으로 하게 되면 클라이언트에게 좀 더 어필할 수 있는 부분이 아닐까 싶다는.. ㅋ
<<추가>>
어제 포스트 올리고 테스트를 하던 도중 IE9에서는 제대로 작동하지 않는 문제가 있었다. jQuery UI 플러그인의
버전이 낮아서 생긴 문제로 최신 버전으로 교체하여 주면 정상 작동하는 것을 확인하였다.
<<수정 2011.10.27. 14:33>>
widgets.php 파일의 스크립트 부분을 조금 수정해서 배열로 데이터를 넘기도록 했다. 이게 좀 더 나을 것 같아서..
<link rel="stylesheet" href="<?=$g4['path']?>/widgets.css" type="text/css">
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.easywidgets.min.js"></script>
<script type="text/javascript">
$(function(){
$.fn.EasyWidgets({
behaviour : {
dragDelay : 100,
dragRevert : 100,
dragOpacity : 0.8,
useCookies : false
}
});
$('#Btn').click(function() {
var wcnt = $('.widget').size();
var idxArray = new Array();
var noArray = new Array();
for(i=0; i<wcnt; i++) {
var idx = $('.widget').index($('.widget:eq(' + i + ')'));
var no = $('.widget:eq(' + i + ')').attr("id").replace("no", "");
idxArray.push(idx);
noArray.push(no);
}
$.post(
'widgets_update.php',
{ 'no[]': noArray, 'order[]': idxArray },
function(data) {
if(data == "100") {
alert("데이터가 제대로 넘어오지 않았습니다.");
return false;
} else if(data == "5000") {
alert("상품 정렬이 완료되었습니다.");
return;
}
}
);
});
});
</script>
<div id="wrap">
<div class="widget-place">
<?php
for($i = 0; $row = sql_fetch_array($result); $i++) {
?>
<div class="widget movable" id="no<?=$row[no]?>">
<div class="widget-header">위젯<?=$row[no]?></div>
<div class="widget-content">위젯 내용</div>
</div>
<?php
}
?>
</div>
<div id="Button"><button id="Btn">완료</button></div>
</div>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.easywidgets.min.js"></script>
<script type="text/javascript">
$(function(){
$.fn.EasyWidgets({
behaviour : {
dragDelay : 100,
dragRevert : 100,
dragOpacity : 0.8,
useCookies : false
}
});
$('#Btn').click(function() {
var wcnt = $('.widget').size();
var idxArray = new Array();
var noArray = new Array();
for(i=0; i<wcnt; i++) {
var idx = $('.widget').index($('.widget:eq(' + i + ')'));
var no = $('.widget:eq(' + i + ')').attr("id").replace("no", "");
idxArray.push(idx);
noArray.push(no);
}
$.post(
'widgets_update.php',
{ 'no[]': noArray, 'order[]': idxArray },
function(data) {
if(data == "100") {
alert("데이터가 제대로 넘어오지 않았습니다.");
return false;
} else if(data == "5000") {
alert("상품 정렬이 완료되었습니다.");
return;
}
}
);
});
});
</script>
<div id="wrap">
<div class="widget-place">
<?php
for($i = 0; $row = sql_fetch_array($result); $i++) {
?>
<div class="widget movable" id="no<?=$row[no]?>">
<div class="widget-header">위젯<?=$row[no]?></div>
<div class="widget-content">위젯 내용</div>
</div>
<?php
}
?>
</div>
<div id="Button"><button id="Btn">완료</button></div>
</div>
배열로 넘오오는 데이터를 처리하기 위해 widgets_update.php 파일 역시 수정.
<?php
include_once("./_common.php");
if(count($no) < 1) {
echo "100";
exit;
}
for($i = 0; $i < count($no); $i++) {
$sql = " update widget set ord = '$order[$i]' where no = '$no[$i]' ";
sql_query($sql);
}
echo "5000";
exit;
?>
include_once("./_common.php");
if(count($no) < 1) {
echo "100";
exit;
}
for($i = 0; $i < count($no); $i++) {
$sql = " update widget set ord = '$order[$i]' where no = '$no[$i]' ";
sql_query($sql);
}
echo "5000";
exit;
?>