테이블 게시물 순서 바꾸기를 연습해봤다.
테이블 순서를 변경해주는 jQuery 소스는 https://github.com/isocra/TableDnD 에서 받을 수 있다.
jquery.tablednd.js첨부로 올린 이 파일을 받아도 된다.
이것은 테이블에서 마우스로 위아래 게시물 순서를 변경할 수 있다는 것만 연습해볼 수 있다.
DB와 연동하여 실제 게시물 순서를 변경하는 것 까지는 안된다.
하지만 거의 DB에서 가져온 것과 같은 결과를 얻어내는 방법까지 설명을 추가했다.
<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/> <!-- 검색엔진에서 검색 제외 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" /> <!--브라우저 호환성 설정 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
<style>
body {font-family: "맑은 고딕";}
table,td,th {border: 1px solid #000;border-collapse:collapse;padding:5px;}
/*사용자 정의 스타일 */
.dragRow {background-color: #eee;}
td.dragHandle {}
td.showDragHandle {background-image: url(images/updown2.gif);
background-repeat: no-repeat;background-position: center left;
cursor: move;
}
table td {padding:5px;}
</style>
<script>
$(function() {
var ordered_items;
onDragClass: "drag",
$('#table_1').tableDnD({
onDrop: function(table, row) {
ordered_items = $.tableDnD.serialize('id');
}
});
$('#btn_order').click(function() {
$('#result').load("test.php?" + ordered_items);
});
});
</script>
</script>
<div id="result">테이블 순서변경 결과 메시지 보여주는 곳</div>
<br>
<table id="table_1" border="1" style="width: 500px;">
<tr id="1"><td>1</td><td>첫번째</td></tr>
<tr id="2"><td>2</td><td>두번째</td></tr>
<tr id="3"><td>3</td><td>세번째</td></tr>
<tr id="4"><td>4</td><td>네번째</td></tr>
<tr id="5"><td>5</td><td>다섯번째</td></tr>
</table>
<input type="button" id="btn_order" name="Test" value = "순서변경"></button>
</body>
</html>
===== test.php =====
<?php
$table_1 = $_GET['table_1'];
echo '저장순서 : ';
foreach ($table_1 as $key=>$value) {
echo '순번 '. ($key+1) . ' 번의 DB idx = '. $value . ', ';
// DB에 결과를 반영하고자 하는 쿼리문을 적어준다
// $query = 'UPDATE table SET orderNO = '.($key+1).' WHERE idx = '.$value.' LIMIT 1';
// mysql_query($query) or die (mysql_error());
}
?>
DB에서 읽어온 파일을 테이블로 구성한다면 <tr id='row['idx']'> 에 값이 저장되도록 한다.
테이블의 순서를 변경하면 자동으로 DB에 저장된 순서로 orderNO 에 순서의 값이 저장된다.
게시물을 읽어서 테이블에 보여주는 개수를 잘 처리하는 것이 중요 포인트가 될 수도 있다.
가령 뽑아내야 할 게시글의 수가 18개 였다고 가정해보자.
그러면 화면에서는 18개가 모두 나오도록 처리하는게 중요하다.
화면에 출력해야 할 Query 문의 개수(count)를 구한 다음에 그 개수만큼 출력하려면 LIMIT $count 만큼 나오도록 쿼리문을 만들어야 한다.
'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글
| PHP 페이징 처리 (0) | 2016.11.01 |
|---|---|
| 테이블 게시글 순서 변경(tableDnD 활용) (0) | 2016.07.10 |
| PHP urlencode() (0) | 2016.03.27 |
| [PHP기초] <textarea> 엔터키 처리, 싱글 쿼테이션(') 처리 (0) | 2016.03.25 |
| [PHP] 검색폼의 결과를 자바스크립트로 제어 (0) | 2015.05.10 |
Link2Me