|
작성 포맷 :
TEXT 모드, 자동 줄바꿈 사용
jquery의 sortable을 이용해 구현한 부분의 순서를 서버에 저장하려면 어떻게 해야하나요?
힘들게 구한 소스는 php용이라...ㅡㅡ
아직 이걸 c#으로 어떻게 변환해야할지 잘 모르겠더라구요.
일단 아래는 그냥 sortable이 있는 부분이구요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Sortable With AJAX & MYSQL</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#test-list").sortable({
handle : '.handle',
update : function () {
var order = $('#test-list').sortable('serialize');
$("#info").load("process-sortable.php?"+order);
//$("#info").show(order);
}
});
});
</script>
</head>
<body>
<pre>
<div id="info">Waiting for update</div>
</pre>
<ul id="test-list">
<li id="listItem_1"><img src="arrow.png" alt="move" width="16" height="16"
class="handle" /><strong>Item 1 </strong>with a link to <a href="http://www.google.co.uk/"
rel="nofollow">Google</a></li>
<li id="listItem_2"><img src="arrow.png" alt="move" width="16" height="16"
class="handle" /><strong>Item 2</strong></li>
<li id="listItem_3"><img src="arrow.png" alt="move" width="16" height="16"
class="handle" /><strong>Item 3</strong></li>
<li id="listItem_4"><img src="arrow.png" alt="move" width="16" height="16"
class="handle" /><strong>Item 4</strong></li>
</ul>
</body>
</html>
서버부분은
<?php
/* This is where you would inject your sql into the database
but we're just going to format it and send it back
*/
foreach ($_GET['listItem'] as $position => $item) :
$sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
endforeach;
print_r ($sql);
?>
이렇습니다.
같은 foreach로 받아야하나? 머 고민을 해보지만.
깔끔한 해결책이 잘 떠오르질 않네요...
|
:{3} 
({4})