درس اعادة ترتيب الحقول او المواضيع او الاقسام او اياً كان باستخدام php و ajax و mysql
المثال
الشرح
اولاً قم بتظمين الاكواد التالية في راس الصفحة
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<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);
}
});
});
</script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
وضع اكواد ال css التالية
* { margin: 0; padding: 0; }
body {
direction: rtl;
background: #161616 url(http://engcv.com/example/img/pattern_40.gif) top left repeat;
margin: 0;
padding: 40;
font: 0.9em Arial;
}
#info {
direction: ltr;
display: block;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #333;
background-color: #efefef;
text-align: center;
}
#test-list {
margin: 10px;
list-style: none;
}
#test-list li {
border-radius:5px;
display: block;
padding: 15px 10px;
margin-bottom: 3px;
background-color: #efefef;
box-shadow: 1px 1px 10px #7cadff;
}
#test-list li img.handle {
margin-left: 20px;
cursor: move;
}
</style>
<style type="text/css">
قم بانشاء حقل جديد في الجدول الذي تريد ان يتم ترتيبه على حسب حقل معين
سمي الحقل مثلاً Postion
قم بالاستعلام وضع الحقول داخل قائمة من نوع ul كتالي
<li id="listItem_1"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>العنصر الاول 1 </strong></li>
<li id="listItem_2"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>العنصر الثاني 2</strong></li>
<li id="listItem_3"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>العنصر الثالث 3</strong></li>
<li id="listItem_4"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>العنصر الرابع 4</strong></li>
</ul>
<ul id="test-list">
عند الاستعلام ضع الايدي مكان الرقم التالي
listItem_1
listItem_2
listItem_3
لاحظ الارقام 1 و 2 و 3 ..الخ
هذه الارقام اجعل الاستعلام يظع رقم الايدي تبع الحقل بدال الارقام السابقة
(ملاحظة لازلنا في الاستعلام)
اما مكان الكلمات
العنصر الاول 1
العنصر الثاني 2
..الخ
ضع المسماء من قاعدة البيانات او اي شي صورة الخ
المهم
الان انشاء ملف لنظع فيه اكواد ال php وليكن اسمة كتالي process-sortable.php
ويحتوي على الاكواد الخاصة بادخال الارقام الجديدة للحقول بعد الترتيب كتالي
foreach ($_GET['listItem'] as $position => $item) :
$sql = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
mysql_query($sql);
endforeach;
include("config.php");أعتقد كل شي واضع
الان مع تحميل الملفات الخاصة بالدرس
تحميل الملفات
ارجو للجميع التوفيق
المصدر