테이블 게시글 순서를 변경 저장해야 할 경우가 있다.
그래서 jQuery tableDnD 를 이용해서 테스트한 것을 적어둔다.
마우스로 Drag 하여 놓기를 하고 순서변경만 누르면 DB에 반영된다.
파일은 https://github.com/isocra/TableDnD 에서 다운로드 받아 jquery.tablednd.js 만 include 한다.
순서를 변경하는 것은 직급 서열 순서를 변경하는 경우에 처리할 것이므로, 화면에 표시할 게시글수를 2페이지로 분리해서 나오도록 하면 안된다.
그래서 limit 에 조건을 만족하는 개수만큼 표시되도록 처리했다.
<?php
session_start();
// 세션 검사 처리는 생략
// DB 연결
include_once $_SERVER['DOCUMENT_ROOT'].'/db.info.php';
require_once $_SERVER['DOCUMENT_ROOT'].'/phpclass/dbClass.php';
$c=new MySQLDbClass();
$DB_CONNECT = $c->isConnectDb($DB);
$where =""; // where 조건문
$limit = $NUM = $c->getDbRows('BOOKS',''); // 조건에 맞는 게시글 개수
$flddata ="uid, title, price, category, orderNO";
$orderby = "orderNO";
$curPage = 1;
$result = $c->getDbArray('BOOKS',$where,$flddata,$orderby,$limit,$curPage);
?>
<!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: #fee;}
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;
$('#table_1').tableDnD({
onDragClass: "dragRow",
onDrop: function(table, row) {
ordered_items = $.tableDnD.serialize('id');
}
});
$('#btn_order').css("cursor","pointer").click(function() {
$.ajax ({
type:"POST",
url:"./order_process.php",
data:ordered_items,
success:function(data) {
alert ("서열순서를 DB에 반영했습니다.");
}
});
});
// class td1 중에서 짝수번째 요소만 선택해서 배경색을 지정색으로 표시
$(".tr1:odd").css("background-color","#F4F9FF");
}); // ready
</script>
<body>
<div class="container">
<div id="article">
총 : <?php echo number_format($NUM)?> 개
</div>
<section id="content">
<table id="table_1" border="1" style="width:800px;">
<tr class="nodrop nodrag"><!-- Drag & Drop 제외 -->
<th>uid</th>
<th>타이틀</th>
<th>가격</th>
<th>구분</th>
<th style="width:50px;">순번</th>
</tr>
<?php
while($row = mysql_fetch_array($result)){
echo '<tr id="'.$row[0].'" class="tr1">';
for($i=0;$i < count(explode(",",$flddata)); $i++){
echo '<td>'.$row[$i].'</td>';
}
echo '</tr>';
}
?>
</table>
<input type="button" id="btn_order" name="Test" value = "순서변경"></button>
</section><!-- content -->
</div><!-- container -->
</body>
</html>
===== order_process.php =====
<?php
if(!isset($_POST['table_1'])) {
echo 'error';
exit;
}
$table_1 = $_POST['table_1'];
foreach ($table_1 as $key=>$value) {
// 정렬순서 변경내역 DB에 반영
require_once $_SERVER['DOCUMENT_ROOT'].'/dbconnect.php'; // db접속
$query = 'UPDATE BOOKS SET orderNO = '.($key+1).' WHERE uid = '.$value.' LIMIT 1';
mysql_query($query) or die (mysql_error());
}
?>
'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글
| HTML5 테이블 만들기 (MySQL 연동) (0) | 2016.11.26 |
|---|---|
| PHP 페이징 처리 (0) | 2016.11.01 |
| [jQuery] 테이블 게시물 순서 바꾸기 (DB 저장처리) (0) | 2016.07.09 |
| PHP urlencode() (0) | 2016.03.27 |
| [PHP기초] <textarea> 엔터키 처리, 싱글 쿼테이션(') 처리 (0) | 2016.03.25 |
Link2Me