Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > สอบถาม เรื่อง Sortable ให้เปลี่ยนแปลงลำดับในฐานข้อมูลด้วยอะครับ รบกวนด้วยนะครับ

สอบถาม เรื่อง Sortable ให้เปลี่ยนแปลงลำดับในฐานข้อมูลด้วยอะครับ รบกวนด้วยนะครับ

เริ่มหัวข้อใหม่

GolF

โพสกระทู้ ( 28 )
บทความ ( 0 )

สอบถาม เรื่อง Sortable เปลี่ยนแปลงลำดับในฐานข้อมูลครับ

Link : http://jqueryui.com/sortable/

อยากให้สามารถย้ายเสร็จแล้วไป update ในฐานข้อมูลด้วยอะครับ

แก้ไขลำดับที่อะครับ

http://www.youtube.com/watch?v=3mOs0VY_sIw VDO สอน

แต่ผมติดตรงที่มัน mysqli อะครับ รบกวนด้วยนะ

Tag : PHP, MySQL, Ajax, jQuery

ประวัติการแก้ไข
2014-07-23 16:18:13

Date : 2014-07-23 15:09:00

By : golfaa

View : 1107

Reply : 4

No. 1

xMan

โพสกระทู้ ( 484 )
บทความ ( 3 )

ตามนี้เลย

http://papermashup.com/drag-drop-with-php-jquery/

Date : 2014-07-24 08:41:02

By : fossil31

No. 2

xMan

โพสกระทู้ ( 484 )
บทความ ( 3 )

เอาเต็มๆไป ละกัน

Database::

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Table structure for table `test_sort`
--

CREATE TABLE `test_sort` (
`id` smallint(4) NOT NULL auto_increment,
`seq` smallint(4) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `test_sort`
--

INSERT INTO `test_sort` VALUES (1, 4);
INSERT INTO `test_sort` VALUES (2, 6);
INSERT INTO `test_sort` VALUES (3, 2);
INSERT INTO `test_sort` VALUES (4, 5);
INSERT INTO `test_sort` VALUES (5, 3);
INSERT INTO `test_sort` VALUES (6, 1);

View::

<?php
try
{
$pdo = new PDO(
'mysql:host=localhost;dbname=your_database',
'your_username',
'your_password');

}
catch (PDOException $e)
{
echo $e->getMessage();
}
$result = $pdo->query("SELECT * FROM test_sort ORDER BY RAND()");
$rows = $result->fetchAll(PDO::FETCH_OBJ);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Drag, Drop, Sort, Save Example</title>
<style>
.demo-frame header, .demo-frame h1, .demo-frame .demo-conversion {display: none;}
.demo-wrapper {min-height: 500px;}
.bsap {position: absolute;top: 0;right: 0;}
#sortable-list{ padding:0; }
#sortable-list li { padding:4px 8px; color:#000; cursor:move; list-style:none; width:500px; background:#ddd; margin:10px 0; border:1px solid #999; }
#message-box{ background:#fffea1; border:2px solid #fc0; padding:4px 8px; margin:0 0 14px 0; width:500px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {

var sortInput = jQuery('#sort_order');
var submit = jQuery('#autoSubmit');
var messageBox = jQuery('#message-box');
var list = jQuery('#sortable-list');

var request = function() {
jQuery.ajax({
beforeSend: function() {
messageBox.text('Updating the sort order in the database.');
},
complete: function() {
messageBox.text('Database has been updated.');
},
data: 'sort_order=' + sortInput[0].value + '&ajax=' + submit[0].checked + '&do_submit=1&byajax=1', //need [0]?
type: 'post',
url: 'sort-save.php?'
});
};

var fnSubmit = function(save) {
var sortOrder = [];
list.children('li').each(function(){
sortOrder.push(jQuery(this).data('id'));
});
sortInput.val(sortOrder.join(','));
if(save) {
request();
}
};

list.children('li').each(function() {
var li = jQuery(this);
li.data('id',li.attr('title')).attr('title','');
});

list.sortable({
opacity: 0.7,
update: function() {
fnSubmit(submit[0].checked);
}
});
list.disableSelection();

jQuery('#dd-form').bind('submit',function(e) {
if(e) e.preventDefault();
fnSubmit(true);
});
});
</script>
</head>
<body>
<div class="demo-wrapper">
<p>Drag and drop the elements below. The database gets updated on every drop.</p>
<div id="message-box"> Waiting for sortation submission...</div>
<form id="dd-form" action="save-sort.php" method="post">
<p>
<input type="checkbox" value="1" name="autoSubmit" id="autoSubmit" />
<label for="autoSubmit">Automatically submit on drop event</label>
</p>
<ul id="sortable-list">
<?php
foreach($rows as $row) {
echo '<li title="'.$row->id.'">Article '.$row->id.'</li>';
}
?>
</ul>
<br />
<input type="hidden" name="sort_order" id="sort_order" value="2,5,6,4,3,1" />
<input type="submit" name="do_submit" value="Submit Sortation" class="button" />
</form>
</div>
</body>
</html>

Update Data ::

<?php
try {
$pdo = new PDO(
'mysql:host=localhost;dbname=your_database',
'your_username',
'your_password');

} catch (PDOException $e) {
echo $e->getMessage();
}

if(isset($_POST['do_submit']))
{

$ids = explode(',',$_POST['sort_order']);

foreach($ids as $index=>$id)
{
$id = (int) $id;
if($id != '')
{
try
{
$pdo->beginTransaction();
$pdo->exec('UPDATE test_sort SET seq='.($index + 1).' WHERE id='.$id);
$pdo->commit();
}
catch (PDOException $exception)
{
$pdo->rollBack();
echo $exception->getMessage();
}
}

}

if($_POST['byajax'])
{
die();
}
else
{
$message = 'Sortation has been saved.';
}

}
?>

Date : 2014-07-24 10:21:01

By : fossil31

No. 3

xMan

โพสกระทู้ ( 484 )
บทความ ( 3 )

Date : 2014-07-24 10:22:59

By : fossil31

No. 4

xMan

โพสกระทู้ ( 484 )
บทความ ( 3 )

complete: function() {
setTimeout(function() {
messageBox.text('Database has been updated.');
}, 500);

Delay ไป ซัก 500 หรือ 1000 จะได้เห็นภาพ

Date : 2014-07-24 10:35:09

By : fossil31

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถาม เรื่อง Sortable ให้เปลี่ยนแปลงลำดับในฐานข้อมูลด้วยอะครับ รบกวนด้วยนะครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก