php – jquery ui – 利用sortable()來排序

2013-05-08 / JSN / 0 Comments / 1,012 次瀏覽

利用sortable()來做排序效果
網頁a.php是使用者端，使用者可自行排序後按下按鈕，儲存排序的結果
網頁ajax.php是用來儲存的伺服器端
很簡單，好上手！

a.php

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }

/* Removes list-style from lists */
ol,ul { list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption,th { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }



ul { float:left; width:300px; height:}
li { background:#CCC; padding:10px; margin:10px; width:50px; float:left;}
</style>
<script>

$(function (){

	// 儲存排序
	//
	// @selector 指定要排序的父元素
	// @child_selector 要排序的子元素
	// @send_selector綁定的送出元素
	// @ajaxurl AJAX送出的網址
	// AJAX 成功後會呼叫 success_sequence_table(data)
	function sequence_table(selector, child_selector, send_selector, ajaxurl) {
		$(selector).sortable();
		$(send_selector).on("click", function (){
			var urstring = "";
			$(child_selector).each(function(index, element) {

				//唯一編號
				var id = $(this).attr("data-id");

				//目前的排序
				var seq = index + 1;

				urstring = urstring + "&" + id + "=" + seq;

				});
			console.log(urstring);

			$.post(ajaxurl, {
				'querystring' : urstring
				}, function (data) {
					success_sequence_table(data)
				})

			});
		}

	//可自行定義
	function success_sequence_table(data) {
		alert(data)
		}


	sequence_table("ul", "li", "button", "ajax.php");
	})
</script>

<ul>
	<li data-id="1">1.美語</li>
	<li data-id="2">2.日文</li>
	<li data-id="3">3.俄文</li>
	<li data-id="4">4.德文</li>
	<li data-id="5">5.法文</li>
	<li data-id="6">6.奧文</li>
	<li data-id="7">7.義文</li>
	<li data-id="8">8.英文</li>
	<li data-id="9">9.中文</li>
</ul>

<button type="button">GO</button>

ajax.php

<?
/*
 *
 * 如 2=1&1=2&3=3
 * 代表 編號2的排序是1
 *		編號1的排序是2
 *		編號3的排序是3
 *
 */

//過濾前後符號
$querystring = $_POST['querystring'];
$querystring = trim($querystring, "? ");
$querystring = trim($querystring, "& ");



parse_str($querystring, $data);

print_r($data);

?>